CSS - 當第一個div溢出時如何強制第二個div到另一個行

我有兩個彼此相鄰放置的寬度相等的div。當第一個div中的文本溢出到第二行時，我希望將第二個div放在第一個div的下面，以便分隔每個div的寬度。這是可能的CSS？CSS - 當第一個div溢出時如何強制第二個div到另一個行

我嘗試過使用柔性盒但我不知道該從哪裏去。

#container { 
 
    display: flex; 
 
    width: 500px; 
 
    border: 1px solid black; 
 
} 
 

 
.cell { 
 
    flex: 1; 
 
}

<div id="container"> 
 
    <div class="cell" style="background-color:pink;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit 
 
    </div> 
 
    <div class="cell" style="background-color:lightblue;"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
    </div> 
 
</div>

來源

2017-06-22 mario_sunny

我真的不知道爲你問你又能解釋，以不同的方式是什麼？我有點困惑，因爲我的理解是，你想讓孩子的身高達到父母身高的100％，所以當一個孩子成長並擴大父母時，另一個孩子也會這樣做，但我正在解釋另一部分說你想要第二行將div放在邊上，在下面？ – alexis

我計算出來。兩個div必須是min-width: 50%，最後一個div必須是flex: 1。母公司應該有flex-wrap: wrap。

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 500px; 
 
    border: 1px solid black; 
 
} 
 
#cell1 { 
 
    background-color: pink; 
 
    min-width: 50%; 
 
} 
 
#cell2 { 
 
    background-color: lightblue; 
 
    min-width: 50%; 
 
    flex: 1; 
 
}

<div id="container"> 
 
    <div id="cell1"> 
 
     Lorem ipsum dods Ut eniasdfasdf 
 
    </div> 
 
    <div id="cell2"> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
    </div> 
 
</div>

來源

2017-06-22 02:19:09

您可以在項目轉flex-wrap: wrap;在容器上和flex-grow: 1;。（在全屏視圖片斷和調整瀏覽器的寬度）

#container { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    flex-wrap: wrap; 
 
} 
 

 
.cell { 
 
    flex-grow:1; 
 
}

<div id="container"> 
 
    <div class="cell" style="background-color:pink;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit 
 
    </div> 
 
    <div class="cell" style="background-color:lightblue;"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
    </div> 
 
</div>

來源

2017-06-22 02:07:53 mkaatman

這不是我正在尋找的行爲。如果第一個div不溢出（在這種情況下，兩個div應該是50％寬度），第二個div應該與第一個div在同一行。你的代碼不滿足這個條件。 –

啊，所以你希望第二個包裝下一個，而不是第一個。很高興你明白了。 – mkaatman

CSS - 當第一個div溢出時如何強制第二個div到另一個行

回答

相關問題