CSS內嵌塊項環繞

不使用絕對定位，是有可能實現在圖2下面效果？CSS內嵌塊項環繞

具體如何能夠在圖2框緊貼下面框1 4貼合等，並且不能在新的一行像圖1。

HTML

<div class="calendar"> 
    <div class="apt" style="height: 200px;">1</div> 
    <div class="apt" style="margin-top: 20px;">2</div> 
    <div class="apt" style="margin-top: 60px; height: 100px">3</div> 
    <div class="apt" style="height: 200px">4</div> 
    <div class="apt">5</div> 
</div>

CSS

.apt 
{ 
    height: 60px; 
    width: 60px; 
    background-color: #ccc; 
    margin: 4px; 
    display: inline-block; 
    float: left; 
} 
.calendar 
{ 
    width: 160px; 
    height: 600px; 
    background-color: #666; 
}

小提琴：http://jsfiddle.net/5gdyab10/

來源

2015-11-14 NoodleFolk

您只能使用絕對定位來實現這一點。原因在於CSS沿着主軸（通常是水平軸）構造佈局，並且每當軸溢出時，就會清除前一行 - 因此會導致您看到的間隙。您可能需要使用CSS列，但這會改變元素的排列順序，同時達到預期的效果。否則，你將不得不使用基於JS的解決方案，如砌體。 – Terry

Flexbox解決方案是否可以接受？當我提到響應式網站時，我並不熱衷於絕對立場。這樣的事情理想用flexbox imo解決。 –

您可以使用flexbox來實現此目的。

演示：http://jsfiddle.net/5gdyab10/4/

HTML

<div class="calendar"> 
    <div class="apt" style="height: 200px; order: 1;">1</div> 
    <div class="apt" style="order: 3; margin-top: 20px;">2</div> 
    <div class="apt" style=" height: 100px; order: 4; margin-top: 60px;">3</div> 
    <div class="apt" style="height: 200px; order: 2;">4</div> 
    <div class="apt" style="order: 5;">5</div> 
</div>

CSS

.apt 
{ 
    height: 60px; 
    width: 60px; 
    background-color: #ccc; 
    margin: 4px; 
} 

.calendar 
{ 
    width: 160px; 
    height: 490px; 
    background-color: #666; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
}

我減少容器的高度，使項目2會去其他列，但你可以做日在或增加項目1和4或2的height。另外我不得不設置項目的自定義順序。

來源

2015-11-14 09:43:04

CSS內嵌塊項環繞

回答

相關問題