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

Question

我正在努力解决一个悬而未决的问题。

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

我需要让它们看起来像这样的模式 (link):

这是我得到的：

.main {
  width: 500px;
}
.container {
  width: 100%;
}
.box50 {
  width: 50%;
  border: 1px solid black;
  float: left;
  box-sizing: border-box;
}
.high {
  height: 120px;
}
.low {
  height: 50px;
}

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

通过清除第二行，我得到了 div 的正确顺序，但我无法在上面的空 space 中得到更高的元素。

是否有 css 解决方案？

Answer 1

你试试 url http://masonry.desandro.com/ 它会给你解决方案

Answer 2

我给你举了个例子。 http://jsfiddle.net/zweapes6/1/

注意我使用的方式

rows > column > content

最好先制作两列 50% 并将它们并排放置，然后将另一列 divs 放在里面。

还有一点要记住，在构建某些东西时使用固定高度（如 120px）不是一个好主意 responsive。

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

Answer 3

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>

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;}

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

css floating elements forming an arranged grid

html

css

grid