Html css浮动元素形成一个排列的网格

我正试图解决一个浮动问题

我得到了50%的元素对，其中一个总是比另一个高。对于每一对新的元件，较高的元件都会改变侧面（例如，左侧的第一对高电平元件，右侧的第二对高电平元件）

我需要让他们在一个模式，看起来像这样（链接）：

以下是我得到的：

.main{
宽度：500px；
}
.集装箱{
宽度：100%；
}
.box50{
宽度：50%；
边框：1px纯黑；
浮动：左；
框大小：边框框；
}
.高{
高度：120px；
}
.低{
高度：50px；
}

一,

二,

三,

四,

你试试这个url，它会为你提供解决方案

我给你举了个例子。

注意我使用的方式

rows > column > content

最好的做法是先将两列

50%

放在一起，然后将另一列

div

放在里面

要记住的另一件事是，在构建具有响应性的东西时，使用固定高度（如

120px

）不是一个好主意

或者像Maheswaran建议的那样使用砖石结构

HTML

<div class="container">
    <div class="main">
        <div class="left right">
            <div class="box50  high">
                <p>1</p>
            </div>
            <div class="box50  low">
               <p>3</p>
            </div>
         </div>
           <div class="left right">
               <div class="box50  low">
                    <p>2</p>
               </div>
                <div class="box50 high">
                    <p>4</p>
                </div>
           </div>
        </div>
</div>

---

不，没有。您可以使用一个Javascript库，比如砖石。除此之外，您唯一的选择是使用CSS 3列，但这需要对元素进行重新排序，因为它们将按列对齐，而不是按行对齐。由于对元素进行重新排序是没有选择的，因此我将研究一下砖石结构。工作起来很有魅力。谢谢你的帮助，我不知道“砖石网格”这个词！这是我在你回答前10分钟的评论中提出的建议。一个只使用CSS的解决方案（就像你的小提琴一样）需要对元素重新排序，这可能是不可接受的。谢谢你的帮助，很遗憾我不能改变元素的顺序，所以我不得不坚持使用砖石。我从来没听说过这么棒的工具：）这应该是一个评论。即使如此，它在你的“答案”之前就已经存在了。

.container {
    width: 50%;
}
.main:after{
    clear:both;
    display:table;
    content:'';
}
.box50 {
    border: 1px solid black;
    box-sizing: border-box;

}
.high {
    height: 120px;
}
.low {
    height:50px;
}
 .left{
    float : left;
    display : block;
}
    .right{
    width : 50%;
}
* {margin:0; padding:0;}