私のdivがお互いに隣り合っているようにしたいが、画面が小さくなると、彼らはお互いの下に行かなければならない。

Question

私のウェブサイトは、互いに横に並んでいる3つのdivに分割され、画面が小さくなるにつれて彼らはそれを行いますが、左側のマージンは右側のマージンよりも小さくなります。

<div class="card-block"> 
    <div class="card-block-content" style="background-color: red;"> 
    <p> 1 </p> 
    </div> 
    <div class="card-block-content" style="background-color: green;"> 
    <p> 2 </p> 
    </div> 
    <div class="card-block-content" style="background-color: blue;"> 
    <p> 3 </p> 
    </div> 
</div> 

CSS：

.card-block { 
    width: 70%; 
    margin-left: 15%; 
    margin-right: 15%; 
    background-color: lightgrey; 
} 

.card-block .card-block-content { 
    display:inline; 
    margin: 0 auto; 
    float:left; 
    padding: 0px; 
    border-right: 1px solid black; 
    width: 33.2%; 
    min-width: 300px; 
} 

.card-block .card-block-content p { 
    padding: 10px; 
} 

Answer 1

あなたはあなたのウェブサイトは、CSSメディアを使用して決定したスペックでどのように見えるかを指定することができhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

に照会し、私は

のdivは何を変更するかわかりません

Answer 2

あなたはメディア画面のクエリを使用する必要があり、特定の幅ではfloatをnoneに、marginをautoに設定する必要があります。それはうまくいくはずです。

@media screen and (max-width:900px) { 
.card-block .card-block-content{float:none; margin: auto} 
} 

Answer 3

CSSフレックスボックスは、この種の動作を処理するのに適しています。

下記のコードをご覧ください。

.card-block { 
 
width: 70%; 
 
display: flex; 
 
flex-wrap: wrap; 
 
margin-left: 15%; 
 
margin-right: 15%; 
 
background-color: lightgrey; 
 
margin: auto; 
 
} 
 

 
.card-block .card-block-content { 
 
padding: 0px; 
 
border-right: 1px solid black; 
 
width: 33.2%; 
 
min-width: 300px; 
 
display: flex; 
 
flex: 1; 
 
} 
 

 
.card-block .card-block-content p { 
 
padding: 10px; 
 
}

<div class="card-block"> 
 
<div class="card-block-content" style="background-color: red;"> 
 
    <p> 1 </p> 
 
</div> 
 
<div class="card-block-content" style="background-color: green;"> 
 
    <p> 2 </p> 
 
</div> 
 
<div class="card-block-content" style="background-color: blue;"> 
 
    <p> 3 </p> 
 
</div>

希望はこのことができます:)ので `float`のだ