如何在 CSS（Flexbox、float、inline-block）中创建浮动多列布局？

Question

首先让我描述一下情况 - 我想实现以下布局：

你看到红色的side元素基本上只是向右浮动，所有其他元素都试图适应剩余的空间，直到它刚好中断到下一行。

目前我正在使用 flexbox 布局，其中 main 和 main#2 具有 flex: 1 1 70%;黄色的小部件有 flex: 1 1 50%;.现在棘手的部分是，我不想指定哪些元素位于红色框的左侧。基本上只有旁边有一个固定的宽度（虽然是百分比）。所有其他元素可以具有不同的大小和高度。所以有时可能是 main#2 没有那么高，因此小部件也可能与红色的 side 元素并排放置，但低于 main#2。

我目前使用 flexbox 和容器的方法

display:flex;
flex-direction:row-reverse;
flex-wrap:wrap;

给了我这个：

问题是 flexbox 不允许左 2 行和右 1 行，我担心没有办法解决这个问题。浮动不是一个选项，因为我不能使用溢出：隐藏并且浮动也不允许我指定元素本身应该填充剩余空间或者是例如50% 如果合适（flexbox 的优点之一）

Answer 1

据我了解，当内容高度较小时，您需要页脚位于侧边栏的左侧，而当内容较高时，页脚位于侧边栏的全宽。

我通过使用浮动和 flex 来拉伸小部件来实现它。请注意，您不需要使用溢出隐藏来清除浮动。

这是Sample fiddle

HTML：

<div class="wrap clearfix">
    <div class="left">
        <div>
            main
        </div>
        <div>
            main#2
        </div>
    </div>

    <div class="right">
        aside        
    </div>

    <div class="footer clearfix">
        <div class="footer-inner">
            <div class="widget">widget</div>
            <div class="widget">widget</div>
        </div>
    </div>
</div>

CSS：

.clearfix:after {
    content: "";
    clear: left;
    display: table;
}
.left {
    float: left;
    width: 70%;
    height: 200px;
    background: green;
}
.right {
    float: right;
    width: 30%;
    height: 200px;
    background: red;
}
.footer {
    clear: left;
}
.footer-inner {
    display: flex;
    background: yellow;
}
.widget {
    flex: 1;
    float: left;
    width: 50%;
}

Answer 2

这是一个老式的布局 - 不是坏事 :) - display: table 是一个非常简单的解决方案。

Have an example! - 所有 div。

Have a more semantic example! - 显然你可以放弃 div.wrap 并加入 HTML5 语义元素。

HTML

<div class="wrap">
  <div class="left">
    <div class="inner">
      Hello
    </div>

    <div class="inner">
      Hello
    </div>
  </div>

  <div class="right"></div>
    <div class="footer-wrap">
        <div class="footer"></div><div class="footer"></div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body {
    height: 100%;
}
.wrap {
    display: table;
    height: 100%;
    width: 100%;
}
.left,.right {
    display: table-cell;
}
.right {
    width: 30%;
    background: red;
}
.left {
    width: 70%;
    background: green;
}
.inner {
    height: 50%;
}
.footer-wrap {
    display: table-row;
}
.footer {
    background: yellow;
    height: 20px;
    width: 50%;
    display: table-cell;
}