我希望我的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

Answer 2

你應該使用媒體屏幕查詢，並在特定的寬度，你應該把你的浮動沒有和保證金自動。那麼它應該工作。

@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>

希望這有助於:)