調整水平分區的並排和堆積

我想要有4個分區：前兩個是25％的寬度和50％的高度，一個與上面的其他人。其他div的寬度爲25％，高度爲100％，寬度爲50％，高度爲100％。我無法弄清楚如何將它們並排排列，因爲它們彼此碰撞。調整水平分區的並排和堆積

div { 
 
    background: green; 
 
    border: 1px solid white; 
 
} 
 

 
.box3{ 
 
    display: inline-block; 
 
    width: 50%; 
 
    height:360px; 
 
    border: 1px solid rgba(255,255,255,0.3); 
 
    box-sizing: border-box; 
 

 
} 
 

 
.box2{ 
 
    display: inline-block; 
 
    width: 25%; 
 
    height:360px; 
 
    border: 1px solid rgba(255,255,255,0.3); 
 
    box-sizing: border-box; 
 

 
} 
 

 
.box{ 
 
    width: 25%; 
 
    height:180px; 
 
    border: 1px solid rgba(255,255,255,0.3); 
 
    box-sizing: border-box; 
 

 
}

<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box2"></div> 
 
<div class="box3"></div>

這裏展示我想要的圖像。

這非常適合使用，當我將元素放入div的時候，它們也浮在頁面的周圍，不會粘在實際的div中，所以我願意爲完全替代的解決方案或框架這也更容易。

來源

2017-02-01 DudeDudeDude

創建樣式顯示主DIV：inline-塊，然後在這個主要DIV放這個盒子s with float：left，嘗試使用display：inline-block代替每個 –

Flexbox，就使得這樣的事情很簡單： Codepen： http://codepen.io/SergiOca/pen/zNWrKP

HTML

<body> 
    <div class="full-wrap"> 
<div class="first-wrap"> 
<div class="box"></div> 

<div class="box"></div> 
</div> 

<div class="box2"></div> 

<div class="box3"></div> 
    </div> 
</body>

CSS

.full-wrap{ 
    display: flex; 
} 
.first-wrap{ 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
} 


.box3{ 
    flex: 2; 
    height:360px; 
    border: 1px solid black; 
} 

.box2{ 
    flex: 1; 
    height:360px; 
    border: 1px solid black; 
} 


.box{ 
    height:180px; 
    border: 1px solid black; 
}

來源

2017-02-01 16:44:32 Sergi

這是可行的，非常感謝。 – DudeDudeDude

不客氣，有點探索flexbox，它確實使佈局這樣的事情真的很容易。我推薦https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Sergi

這有點舊了，可能構成另一個問題，但你能指出我的方向，使這個手機響應？因此，如果屏幕不是桌面的，不夠寬，那麼這些框會出現在另一個的上方，而不是像我上面所推薦的那樣強行並排。 – DudeDudeDude

調整水平分區的並排和堆積

回答

相關問題