Question

我正在尝试创建一个响应式布局，其中文章的某些部分将出现在较大断点的右侧列中。每列中的部分必须叠在一起。

我遇到的问题是方框4出现在方框3的对面，在右栏中的方框2下创建了一个不需要的间隙。

＆＃13;

.wrapper {
  width: 400px;
}
.section {
  width: 50%;
}
.left {
  float: left;
  clear: left;
  background-color: #E26A6A;
}
.right {
  float: right;
  clear: right;
  background-color: #DCC6E0;
}

＆＃13;

<body>
  <div class="wrapper">
    <div class="section left">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor</div>
    <div class="section right">2</div>
    <div class="section left">3</div>
    <div class="section right">4</div>
  </div>
</body>

＆＃13;

Answer 1

将最小高度或高度设置为div节

.section {
    min-height: 200px;
    width: 50%;
}

http://jsfiddle.net/awkoL2sw/

Answer 2

使用带有简化标记的flexbox（在我的示例中，div元素上的类不是必需的）您可以这样尝试：http://codepen.io/anon/pen/YPXJNM

<强>代码

HTML

  <div class="wrapper">
    <div>1 Lorem ipsum dolor sit amet, ... dolor</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

CSS

.wrapper div:nth-child(2n)     {  background: #DCC6E0; }
.wrapper div:nth-child(2n - 1) {  background: #E26A6A; }

.wrapper { 
  width: 100%; 
  display: flex;
  flex-wrap: wrap; }

.wrapper div { width: 50%; }

屏幕截图

enter image description here

浏览器和教程中的

Flexbox支持：

http://caniuse.com/#feat=flexbox
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

CSS - 左右浮动部分，响应式设计

2 个答案: