Question

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

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

这似乎不起作用。

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

有谁知道怎么做？

感谢。

Answer 1

以下是DEMO的示例。

div是块级元素。这意味着默认情况下没有任何东西可以放在它的两边。您可以使用浮动来更改此行为。或者，您可以更改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.

Answer 2

HTML

<div id="container">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="bottom"></div>
</div>

CSS

div
{
    margin: 0;
}

#container
{
    font-size: 0;
}

.top
{
    border: 1px solid blue;
    height: 50px;
    width: 202px;
}

.bottom
{
    border: 1px solid red;
    display:inline-block;
    height: 50px;
    width: 100px;
}

小提琴：http://jsfiddle.net/NgakP/1/

Answer 3

你必须使用CSS。

你给你的div赋予一个样式类，然后是float：right，float：left属性应该允许你达到你处理底部div的目标。然后你可以使用块样式将它们放在另一个上。

Answer 4

显示底部的两个内联块。默认情况下，第一个div后会有一个中断。

检查出来：http://jsfiddle.net/2MBWT/2/

不要忘记边框占用空间

div {
    border: 1px solid black;
    max-width: 300px;
}

.column {
    display:inline-block;
    width: 149px;
}

Answer 5

这样的事可能吗？

FIDDLE

HTML

<div class="topdiv"></div>
<div class="leftbottom"></div>
<div class="rightbottom"></div>

CSS

.topdiv{
    background-color:red;
    width:200px;
    height:100px;    
}
.leftbottom{
     background-color:yellow;
    width:100px;
    height:100px; 
    position:relative;
    float:left;

}
.rightbottom{
     background-color:blue;
    width:100px;
    height:100px;
    position:relative;
    float:left;

}

编辑：关于您的 border-collapse 问题，我不会在这种情况下申请，因为我们使用div，默认情况下没有边框，除非您手动分配同样的。

Answer 6

<div style="width:100px;height:50px;"></div>
<br />
<div style="width:100px">
    <div style="width:50px;height:50px;float:left;display:inline-block;"></div>
    <div style="width:50px;height:50px;float:right;"></div>
</div>

Answer 7

这是因为div有“block”作为默认显示类型，这意味着每个div都开始一个新行。使用css有几种方法可以解决这个问题。我会用“浮动”。

HTML：

<div id="container">
   <div class="fullWidth"></div>
   <div class="halfWidthContainer">
       <div class="halfWidth green"></div>
       <div class="halfWidth blue"></div>
   </div>
</div>

CSS：

#container{
   width: 300px;
   height: 200px;
   border: 2px solid red;
}
.fullWidth{
   width: 300px;
   height: 100px;
   background: #aaa;
}
.halfWidth{
   width: 150px;
   height: 100px;
   float: left;
}
.green{
   background: green;
}
.blue{
   background:blue;
}

当然，“。green”和“.red”类是可选的，仅用于演示目的。另外，你可能不会给你的div一个固定的高度，所以高度适合内容。

如果使用填充或边距，请记住它们会影响元素的总宽度。例如，当你的.halfWith填充为10时，这意味着它的总数将为190（其中150加上左边距20加右边距20）。你必须将.halfWith的设置为110，这样总的数量就会是你容器的一半。

如何在两者之间没有间距设置div？

7 个答案: