CSS浮动无法正常显示

Question

请参阅this fiddle。

<div style="width: 200px; position:relative;">
    <div style="float:left; width: 48%; background-color: green;">
        <p>Float1</p>
        <p>expanded</p>
        <p>expanded</p>
    </div>
    <div style="float: right; width:48%; background-color: blue;">
        <p>Float2</p>
        <p>expanded</p>
    </div>
    <div style="float:left; width: 48%; background-color: yellow;">
        <p>Float3</p>
        <p>expanded</p>
    </div>
    <div style="float: right; width: 48%; background-color: gray;">
        <p>Float4</p>
        <p>expanded</p>
    </div>
    <div style="float: left; width: 48%; background-color: red;">
        <p>Float5</p>
    </div>
    <div style="float: right; width: 48%; background-color: cyan;">
        <p>Float6</p>
        <p>expanded</p>
    </div>
    <div style="clear: both; border: none;">
</div>

我希望将不均匀编号的块浮动到左侧，将偶数块浮动到右侧。请注意，块具有可变高度。这应该是结果：

Float1 Float2
Float3 Float4
Float5 Float6

相反，我将Float3元素放到右边，因为Float2比Float1短（注意与正确项目的错位）。同样的事情发生在左边显示的Float6上。

我做错了吗？我该如何解决这个问题？

（抱歉我的英语不好）

Answer 1

您需要将每对放在一个包含DIV中，否则您需要将它们放在相同的高度。

Answer 2

您的问题是您没有在子div中均匀划分父级的宽度。确保所有子容器的宽度总和不超过父容器的宽度。因此，例如，将子div的宽度更改为15％将使div水平排列，奇数向左甚至向右排列。

Answer 3

上面两个答案在某种程度上是合乎逻辑的，在实际设计之前必须注意设计模式。但是，之后该怎么做。这是一个简单的更新fiddle

这只是解决问题的一种方法。

例如，不要使用float，而是使用此

<div style="float:left; width: 48%; background-color: yellow;margin-right:5px">

即保证金以满足您的意图。

Answer 4

你考虑过使用bootstrap吗？在Bootstrap v3.0中，它非常容易制作任何甚至可以优雅降级到移动的列结构。

话虽这么说，如果你想要它，我将提供相同的Bootstrap列代码，如果不是这里是另一种CSS只能完成这个模式。我删除了内联样式，因为它很快变得混乱，我也分隔了每个给定方的框。如果您使用PHP或JQuery或JavaScript，您可以轻松地将此DOM操作移开并将平均值移至一侧并将可能性移至另一侧。

<强> CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
div {
    border: 2px solid black;
    padding: 2px;
    margin: 1px;
}
.column {
    width: 48%;
}

<强> HTML

<div style="width: 200px; position:relative;">
    <div class="column" style="float: left;">    
        <div style="background-color: green;">
            <p>Float1</p>
            <p>expanded</p>
            <p>expanded</p>
        </div>
        <div style="background-color: yellow;">
            <p>Float3</p>
            <p>expanded</p>
        </div>
        <div style="background-color: red;">
            <p>Float5</p>
        </div>
    </div>
    <div class="column" style="float: right;">    
        <div style="background-color: blue;">
            <p>Float2</p>
            <p>expanded</p>
        </div>
        <div style="background-color: gray;">
            <p>Float4</p>
            <p>expanded</p>
        </div>
        <div style="background-color: cyan;">
            <p>Float6</p>
            <p>expanded</p>
        </div>
    </div>
    <div style="clear: both; border: none;"></div>
</div>

Answer 5

灵活的盒子模型

我最接近这一点，同时仍保留原始标记，是使用flex box - css-tricks解释，或{{}} {} 3}}

以下是我工作的mdn，或者如果您愿意，这里有一个嵌入式代码段：

＆＃13;

＆＃13;

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 200px;
  background: white;
  border: 2px solid black;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
     -moz-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: flex-start;
     -moz-align-items: flex-start;
      -ms-align-items: flex-start;
          align-items: flex-start;
  -webkit-flex-wrap: wrap;
     -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-between;
     -moz-justify-content: space-between;
      -ms-justify-content: space-between;
          justify-content: space-between;
}

.container > div {
  width: 46%;
  padding: 2px;
  margin: 1px;
  border: 2px solid black;
  -webkit-align-self: stretch;
     -moz-align-self: stretch;
      -ms-align-self: stretch;
          align-self: stretch;
}

＆＃13;

<div class="container">
  <div style="background-color: green;">
    <p>Float1</p>
    <p>expanded</p>
    <p>expanded</p>
  </div>
  <div style="background-color: blue;">
    <p>Float2</p>
    <p>expanded</p>
  </div>
  <div style="background-color: yellow;">
    <p>Float3</p>
    <p>expanded</p>
  </div>
  <div style="background-color: gray;">
    <p>Float4</p>
    <p>expanded</p>
  </div>
  <div style="background-color: red;">
    <p>Float5</p>
  </div>
  <div style="background-color: cyan;">
    <p>Float6</p>
    <p>expanded</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

三个警告：

1. 显然，flexbox相当现代，因此不能向后兼容。我已经测试了所有最新版本的流行浏览器 - Chrome，Firefox，Opera，Safari - 不在Internet Explorer中，但它应该在IE10 +中运行。

2. 如果您将每件物品保持在自己的高度，则无法垂直避开白色间隙（请参见下图）。但是，使用flexbox，您可以使用align-self: stretch （左图像不拉伸，右图拉伸）来拉伸每行中的较小项目以填充剩余空间。虽然令人烦恼的是你不能将物品保持在原来的高度，但至少比硬编码固定高度要好一步，原因有两个。

   1. 较小的项目将始终自动计算其高度，与其他任何项目相比（不需要手动css更新）。
   2. 如果行的大小动态变化（即在页面中生效），较小的项目将自动更新其高度（不用任何摆弄js）。
      
      

3. 如果你需要任何其他类型的任意模式向左或向右移动，这只适用于你所描述的偶数和奇数项（或明显反转，即1,3,5在右边），此方法将失败，因为它依赖于每个偶数项后的行换行。

Answer 6

我最终使用了Columnizer jQuery插件。它似乎是我的问题的一个非常和整洁的解决方案，因为我无法编辑HTML结构。