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

【问题标题】：CSS - Floating sections left and right, responsive designCSS - 左右浮动部分，响应式设计
【发布时间】：2014-11-27 20:00:13
【问题描述】：

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

我遇到的问题是框 4 出现在框 3 的对面，在右侧列中的框 2 下产生了一个不需要的间隙。

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

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

【问题讨论】：

你能改变标记吗？表示标记中所有左侧元素一个接一个？
否则请参阅：stackoverflow.com/questions/26985139/…

标签： css responsive-design css-float

【解决方案1】：

为部分 div 设置最小高度或高度

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

http://jsfiddle.net/awkoL2sw/

【讨论】：

每个div的内容会有所不同，所以每个section的高度需要可变。
对于包装文本使用 display:flex;

【解决方案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%; }

截图

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

【讨论】：