css - float 和空间

Question

我想放置 4 个 block :2 个在左边，2 个在右边。

我无法更改 div 和 d1 的顺序，d3 必须在右边。相反，d2、d4 必须在左边。我的第一个想法是这样做:

html:

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>

CSS:

div {
    background-color: red;
    border: solid 1px;
    height: 20px;
}

.d1, .d3 {
    float:left;
    width: 68%;
    height: 50px;
}

.d2, .d4 {
    float: right;
    width: 28%;
}

事实是d2和d4是用空格隔开的。我在想那个 block 将使用所有可用空间。

如何在不更改 block 顺序且仅使用 float(无绝对定位)的情况下删除 d2 和 d4 之间的空白区域？另外，为什么会有这个空间？

这是 fiddle :http://jsfiddle.net/jjmj2a59/

Answer 1

我不太对劲，我有 3 种不同的解决方案，它们几乎可以工作，但最终无法满足您的所有限制:

第一个想法:负 margin-top

缺点:需要知道.d1和.d2的高度

div {
    background-color: red;
    border: solid 1px;
    height: 20px;
}

.d1, .d3 {
    float:left;
    width: 68%;
    height: 50px;
}

.d2, .d4 {
    float: right;
    width: 28%;
}

.d4 {
    margin-top:-30px;
}

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>

第二个想法:两行 Flexbox

这可能是最接近您想要的，唯一的缺点是 .d2 和 .d4 是垂直居中的，而不是在顶部。您还需要为您的 div 的父级设置一些样式规则，但我无法想象这是一个问题。
此外，这在 IE9 及以下版本中不起作用，在 IE10 中可能看起来有点不同。

.flex-parent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.flex-parent div {
    background-color: red;
    border: solid 1px;
}
.d1, .d3 {
    width: 68%;
    height: 50px;
    -webkit-align-self:flex-start;
    -ms-flex-item-align:start;
    align-self:flex-start;
}
.d2, .d4 {
    width: 28%;
    height: 20px;
}
.d2 {
    -webkit-align-self:flex-end;
    -ms-flex-item-align:end;
    align-self:flex-end;
}

<div class="flex-parent">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
</div>

第三个想法:2 列的 flexbox(不完整)

这里的总体思路是使用 flexbox 来做到这一点:

1. 按.d1 .d3 .d2 .d4 .d4 的顺序重新排序元素>
2. 将它们显示在一列中
3. 将 .d1 和 .d3 靠左对齐，将 .d2 和 .d4 靠右对齐容器。
4. 在 .d3 和 .d2 之间强制换行以将 .d2 和 .d4 插入一个新的专栏。

我有 1-3，但如果不指定容器的高度或必须精确调整为最大元素之一的高度的边距，我就无法实现 4。也许其他人知道如何解决这个问题，所以这是我目前得到的:

.flex-parent {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
.flex-parent div {
    background-color: red;
    border: solid 1px;
}
.d1, .d3 {
    width: 68%;
    height: 50px;
    -webkit-align-self:flex-start;
    -ms-flex-item-align:start;
    align-self:flex-start;
}
.d2, .d4 {
    width: 28%;
    height: 20px;
    -webkit-align-self:flex-end;
    -ms-flex-item-align:end;
    align-self:flex-end;
}
.d1 {
    -webkit-box-ordinal-group:2;
    -webkit-order:1;
    -ms-flex-order:1;
    order:1;
}
.d2 {
    -webkit-box-ordinal-group:4;
    -webkit-order:3;
    -ms-flex-order:3;
    order:3;
}
.d3 {
    -webkit-box-ordinal-group:3;
    -webkit-order:2;
    -ms-flex-order:2;
    order:2;
}
.d4 {
    -webkit-box-ordinal-group:5;
    -webkit-order:4;
    -ms-flex-order:4;
    order:4;
}

<div class="flex-parent">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
</div>