Html 如何将一个div定位到其他两个div创建的间隙中_Html_Css

Html 如何将一个div定位到其他两个div创建的间隙中

html css

Html 如何将一个div定位到其他两个div创建的间隙中,html,css,Html,Css,我试图创建一个流畅的布局，但我似乎无法将紫色/黑色div定位在正确的位置。如何使div向上移动，以便它可以填充以前div创建的空间。这是我的密码： <body> <div class="container"> <div class="square-one"></div> <div class="square-two"></div> <div class="square-three"><

我试图创建一个流畅的布局，但我似乎无法将紫色/黑色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>

`这就是我得到的：

这就是我想要的

更改

。将三个

平方变成

浮点：右：

html，正文{
保证金：0；
}
* {
框大小：边框框；
}
div{
边框：1px纯灰；
}
.集装箱{
宽度：100%；
显示：内联块；
浮动：左；
}
1.第一广场{
浮动：左；
宽度：25%；
高度：200px；
背景色：#fff；
显示：内联块；
保证金：0；
填充：0；
}
.平方二{
浮动：左；
宽度：75%；
高度：200px；
背景色：#63D6C3；
显示：内联块；
保证金：0；
填充：0；
}
.广场三号{
浮动：左；
宽度：25%；
高度：200px；
背景色：#F86060；
显示：内联块；
保证金：0；
填充：0；
}
.四号广场{
浮动：左；
宽度：25%；
高度：200px；
背景色：#ffffff；
显示：内联块；
保证金：0；
填充：0；
}
.五号广场{
浮动：对；
宽度：50%；
高度：400px；
背景色：#FBFAED；
显示：内联块；
保证金：0；
填充：0；
}
六号广场{
浮动：左；
宽度：50%；
高度：400px；
背景色：#061D33；
显示：内联块；
保证金：0；
填充：0；
颜色：#fff；
}

1.
2.
3.
4.
5.
6.
x
我喜欢这些颜色。您似乎需要的是一个类似于砌体插件创建的布局。如果不使用javascript，您可能无法实现这一点。
.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;
}