漂浮和空间

Question

我想定位4个街区：左边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被空格隔开。我以为该块将使用所有可用空间。

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

这里是小提琴：http://jsfiddle.net/jjmj2a59/

Answer 1

我无法做到这一点，我有3种不同的解决方案几乎可以工作，但最终无法满足您的所有限制：

第一个想法：否定margin-top

缺点：你需要知道.d1和.d2

的高度

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第二个想法：Flexbox分为两行

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第三个想法：两列中的flexbox（不完整）

这里的一般想法是使用flexbox来执行此操作：

1. 按顺序.d1 .d3 .d2 .d4
重新排序元素
2. 将它们显示在一列
中
3. 将.d1和.d3对齐到左侧，将.d2和.d4对齐到容器的右边缘。
4. 在.d3和.d2之间强行换行，将.d2和.d4推入新列。

我有1-3，但是如果没有指定容器的高度，或者必须将其精确调整到最大元素之一的高度，我就无法获得4 。也许别人知道如何解决这个问题，所以这就是我到目前为止所做的：

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;