-1

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

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

这似乎不起作用。

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

有谁知道如何做到这一点？

谢谢。

4

7 回答 7

3

这是一个示例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;
}

的文档display。
的文档float。

于 2013-08-09T13:37:43.920 回答
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/

于 2013-08-09T13:37:16.027 回答
1

你必须使用 CSS。

您为您的 div 提供了一个样式类，然后 float:right、float:left 属性应该允许您达到处理底部 div 的目标。然后，您可以使用块样式将它们放在另一个上。

于 2013-08-09T13:37:29.060 回答
1

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

看看这个：http: //jsfiddle.net/2MBWT/2/

不要忘记边框也占用空间

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

.column {
    display:inline-block;
    width: 149px;
}
于 2013-08-09T13:37:32.180 回答
1

可能是这样的？

小提琴

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;

}

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

于 2013-08-09T13:37:53.810 回答
1 
<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>
于 2013-08-09T13:42:57.147 回答
1

这是因为 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 时，这意味着它的 with 总共有 190（150 加上左边距 20 加上右边距 20）。您必须将 .halfWith 的 with 设置为 110，以便总 with 再次成为容器的一半。

于 2013-08-09T13:45:03.277 回答