html - 重新排列 Div 结构

Question

我有以下 div 结构。

我想在 CSS 的帮助下重新排列它。仅 这样就会没有空间 b/w Div-1(Data: Test-1, 25) & Div-3(Data: 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 1,3 安排在单独的 div 中，将 div 2,4 安排在单独的 div 中，如下所示: 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;
}