如何將div放入由另外兩個div創建的間隙中

我正在嘗試創建流體佈局，但似乎無法將紫色/黑色div定位在正確的位置。如何讓div向上移動，以便填充由以前的div創建的空間。這裏是我的代碼：如何將div放入由另外兩個div創建的間隙中

<body> 
<div class="container"> 
    <div class="square-one"></div> 
    <div class="square-two"></div> 
    <div class="square-three"></div> 
    <div class="square-four"></div> 
    <div class="square-five"></div> 
    <div class="square-six"></div> 
    <div class="container-three"></div> 
</div> 
</body>

CSS

.container { 
    width: 100%; 
    display: inline-block; 
    float: left; 
} 

.square-one { 
    float: left; 
    width: 25%; 
    height: 200px; 
    background-color: #fff; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

.square-two { 
    float: left; 
    width: 75%; 
    height: 200px; 
    background-color: #63D6C3; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

.square-three { 
    float: left; 
    width: 25%; 
    height: 200px; 
    background-color: #F86060; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

.square-four { 
    float: left; 
    width: 25%; 
    height: 200px; 
    background-color: #ffffff; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

.square-five { 
    float: left; 
    width: 50%; 
    height: 400px; 
    background-color: #FBFAED; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

.square-six { 
    float: left; 
    width: 50%; 
    height: 400px; 
    background-color: #061D33; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
}

'這就是我得到：

這就是我想要

來源

2017-05-04 marcos

愛的顏色。你似乎需要的是一個類似於砌體插件創建的佈局。如果不使用JavaScript，您可能無法實現此目的。 –

變化.square-three到float: right;：

html, body { 
 
margin: 0; 
 
} 
 
* { 
 
box-sizing: border-box; 
 
} 
 
div { 
 
border: 1px solid grey; 
 
} 
 
.container { 
 
    width: 100%; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.square-one { 
 
    float: left; 
 
    width: 25%; 
 
    height: 200px; 
 
    background-color: #fff; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.square-two { 
 
    float: left; 
 
    width: 75%; 
 
    height: 200px; 
 
    background-color: #63D6C3; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.square-three { 
 
    float: left; 
 
    width: 25%; 
 
    height: 200px; 
 
    background-color: #F86060; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.square-four { 
 
    float: left; 
 
    width: 25%; 
 
    height: 200px; 
 
    background-color: #ffffff; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.square-five { 
 
    float: right; 
 
    width: 50%; 
 
    height: 400px; 
 
    background-color: #FBFAED; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.square-six { 
 
    float: left; 
 
    width: 50%; 
 
    height: 400px; 
 
    background-color: #061D33; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #fff; 
 
}

<div class="container"> 
 
    <div class="square-one">1</div> 
 
    <div class="square-two">2</div> 
 
    <div class="square-three">3</div> 
 
    <div class="square-four">4</div> 
 
    <div class="square-five">5</div> 
 
    <div class="square-six">6</div> 
 
    <div class="container-three">x</div> 
 
</div>

的DIV之間的空間可以用利潤率（你不得不考慮設置DIV的寬度時，使用calc(width_in_percent - sum_of_margins)可以做到，但你沒有添加任何你自己，所以我也沒有做到。

來源

2017-05-04 22:00:05 Johannes

如何將div放入由另外兩個div創建的間隙中

回答

相關問題