如何自動化三個div的寬度以適應容器？

我有一個寬度爲100％的單個div。當瀏覽器調整大小時，div的大小保持爲瀏覽器寬度的100％。裏面的div是另外三個寬度爲200px的div。當瀏覽器拉伸到600px寬，那麼所有的div並排很好，就像我想要的一樣。但是，如果您將瀏覽器拉伸至599像素或更少，則一個或兩個div會被撞倒並出現在其他div不太理想的位置。如何自動化三個div的寬度以適應容器？

所以我想要的是divs始終保持並排，同樣改變寬度。因此，如果我將瀏覽器寬度更改爲例如150px，那麼所有並排的三個div的寬度均爲50px。

這可能只使用CSS和HTML代碼嗎？我不認爲我需要提供我的代碼，因爲它只是一個div內的三個div。

來源

2017-10-04 Steven

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

您可以將這些設置應用於您的三個DIV。

.my_div { 
    width: 33%; 
    max-width: 200px; 
}

這將確保三倍的DIV總是放入容器中（33％的寬度），但絕不會獲得比各爲200px寬，如果還容器大於600像素寬得多。

來源

2017-10-04 15:40:13 Johannes

您可以用Flexbox的做到這一點：

* {margin:0;padding:0;box-sizing:border-box} 
 

 
.parent { 
 
    display: flex; /* displays children inline */ 
 
} 
 

 
.child { 
 
    flex: 0 1 200px; 
 
    text-align: center; 
 
} 
 

 
.red {background: #f00} 
 
.green {background: #0f0} 
 
.blue {background: #00f}

<div class="parent"> 
 
    <div class="child red">Red</div> 
 
    <div class="child green">Green</div> 
 
    <div class="child blue">Blue</div> 
 
</div>

來源

2017-10-04 15:42:33 VXp

.parent { 
 
    display: block; 
 
} 
 
.child{ 
 
    width: 32.5%; 
 
    border:1px solid red; 
 
    float:left; 
 
}

<div class="parent"> 
 
    <div class="child">One</div> 
 
    <div class="child">Two</div> 
 
    <div class="child">Three</div> 
 
</div>

來源

2017-10-04 15:45:32 Amit

如何自動化三個div的寬度以適應容器？

回答

相關問題