如何将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创建的间隙中

回答

相关问题