浮動的div當在單獨的行

Question

我試圖實現以下浮動佈局100寬度：

兩個內的div（紅色+綠色）接下來應該用60％被放置成彼此和外部divs總寬度的40％。

無論何時調整窗口大小以使綠色和紅色內容不適合放在一行上時，每個內部div應該佔據自己的行，佔100％外部div的寬度。

編輯： 我不知道，當調整大小應donw。這取決於div的內容。在我的情況2動態創建的表。每當表格可以彼此相鄰顯示時，它們應該放置在一行上。只要他們不這樣做（因爲列太多，文本太長等），他們應該分成兩行。媒體解決方案（固定斷點因此不能幫助我）。不知道這是僅僅使用CSS還是可能的，或者我需要在這裏包含一些js？

這是可達到使用CSS/HTML只？

Answer 1

你可以得到相當接近與Flexbox的佈局，但在包裝和滾動發生在同一時間兩排的寬度不一樣。我認爲您需要使用媒體查詢或Javascript才能在需要時進行修復。

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.item { 
 
    height: 100px; 
 
} 
 
.item-1 { 
 
    background: aqua; 
 
    flex: 1 1 60%; 
 
} 
 
.item-2 { 
 
    background: gold; 
 
    flex: 1 1 40%; 
 
}

<div class="container"> 
 
    <div class="item item-1"> 
 
    <div style="width:600px;">1</div> 
 
    </div> 
 
    <div class="item item-2"> 
 
    <div style="width:400px;">2</div> 
 
    </div> 
 
</div>

jsFiddle

Answer 2

只是媒體查詢來實現它。您可以使用另一個CSS文件，您可以在其中保存所有用於移動設備（包括iPad和平板電腦）的CSS尺寸。 你也可以使用CSS框架，比如Bootstrap，foundation和materializecssm，它們已經解決了這種情況。

樣品：

//mobiles 
 
@media (max-width: 479px) { 
 
    .red{width:100%} 
 
    .green{width:100%} 
 
} 
 
//mobiles to ipad/tablet 
 
@media (min-width: 480px) and (max-width: 767px) { 
 
    .red{width:100%} 
 
    .green{width:100%} 
 
} 
 

 
//laptop 
 
@media (min-width: 768px) and (max-width: 991px) { 
 
    .red{width:60%} 
 
    .green{width:40%} 
 
} 
 
//small monitors 
 
@media (min-width: 993px) and (max-width: 1059px) { 
 
    .red{width:60%} 
 
    .green{width:40%} 
 
} 
 
//standard to large monitors 
 
@media (min-width: 1060px) and (max-width: 1199px) { 
 
    .red{width:60%} 
 
    .green{width:40%} 
 
} 
 
//large monitors 
 
@media (min-width: 1200px) { 
 
    .red{width:60%} 
 
    .green{width:40%} 
 
}