重新排列Div结构

Question

我有以下div结构。

我想用C.S.S的帮助重新安排这个。仅这样无空间 b / w Div-1（数据：测试-1,25）＆amp; Div-3（数据：Test3,45）。

以下是JSFiddle Link

HTML

<div class="test">
    Test 1
    <br/>
    25
</div>

<div class="test">
    <div class="abc">
       Test 2
       <br/>
       35
     </div>
</div>

<div class="test">
    Test 3
    <br/>
    45
</div>

CSS

.test{
    width: 48%;
    border: 1px solid black;
    border-radius: 12px;
    font-size:14px;
    text-align: center;
    float: left;
    display:inline-block;

}
.abc{

    height:75px; 

}

Answer 1

由于div 2的高度，你的第3个div位置会受到影响。因此，您可以在单独的div中安排div 1,3并在单独的div中安排2,4，如下所示： DEMO

<强> HTML：

<div class="col">
    <div class="test">Test 1
        <br/>25</div>
    <div class="test">Test 3
        <br/>45</div>
</div>

<强> CSS：

.col {
    width: 48%;
    float: left;
    display:inline-block;
}
.test {
    width:100%;
    border: 1px solid black;
    border-radius: 12px;
    font-size:14px;
    text-align: center;
}

Answer 2

您必须为右侧div容器创建额外的CSS样式属性。他们都使用左浮动属性，这不能正常工作。

尝试使用CSS：

.test-right {
   float: right;
}

和HTML：

<div class="test test-right">
    <div class="abc">
    Test 2
    </div>
</div>

JSFiddle

Answer 3

不幸的是...

你不能（抱歉）。

如果div元素的高度未知并且它们必须从左向右显示，则无法使用CSS实现 - 您需要使用Masonry或{{ 3}}

如果divs的高度已知且比例正确 - 有许多解决方案（CSS表格派生或列表），如果显示顺序是从上到下而不是从左到右，您还可以查看使用列。