在另一個div內有兩個div的響應式佈局

我有這個HTML結構。在另一個div內有兩個div的響應式佈局

<div class="container"> 
    <div class="A"></div> 
    <div class="BandC"> 
     <div class="B"></div> 
     <div class="C"></div> 
    </div> 
</div>

我想有以下佈局如果屏幕寬度大於或等於說800像素...

enter image description here

...但我想這個時候的寬度小於800像素。

enter image description here

這裏對我來說，挑戰是，B和C是同一div。我把B和C放在同一個div裏，如果內容垂直溢出，B和C旁邊會出現滾動條。

這是我到目前爲止（jsFiddle）。我使用display:flexbox將.BandC移動到右側，但B保持在C之上，因爲它們位於同一個div中。

我該如何實現這種佈局，同時允許B和C在同一個div中？或者這是否需要在我的HTML中更改？

來源

2014-04-02 CookieMonster

Bootstrap會成爲一個選項嗎？你可以在不到1分鐘內解決這個問題。 – aurbano

在第一個例子中，A有一個固定的高度和寬度？如果C包含更多文本，會發生什麼情況？ – fcalderan

@Chevi No Bootstrap/Foundation。 :(但是我不認爲我可以用它們中的任何一個來做到這一點，問題是B和C在同一個容器中，請給我一個例子，然後我可以模仿它是如何完成的。 – CookieMonster

我想通了。我用position:absolute把C拿出來了。

jsFiddle

來源

2014-04-02 12:24:01 CookieMonster

在另一個div內有兩個div的響應式佈局

回答

相關問題