css - 如何设置没有间隔的div？

Question

我想设置一个像这样的 div 结构(顶部有一个 div，下面有两个 div)但我不想使用任何表格。此外，div 之间不能有任何间距，如果可能的话，我希望折叠边框。

 _________
|         |
|_________|
|    |    |
|____|____| 

这似乎行不通。

<div></div>
<br/>
<div></div><div></div>

有人知道怎么做吗？

谢谢。

Answer 1

这是一个例子 DEMO .

div 是 block 级元素。这意味着默认情况下没有任何东西可以坐在它的两侧。您可以使用 float 来更改此行为。或者您可以更改 display 属性。 display: inline-block 效果很好，但在旧版浏览器中不受支持。下面是一个使用 float 的示例。

HTML:

<div class="container">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

CSS:

.container {
    width: 150px;
}
.top {
 border: solid 1px blue;
}
.left {
 border: solid 1px red;   
    width: 73px;
    float:left;
}
.right {
 border: solid 1px green; 
    width: 73px;
    float:right;
}

Documentation for display.
Documentation for float.