Question

我想以这样的方式联系div块：

+-----+------+
|first|second|
|     |      |
+     +------+
|     |third |
|     |      |
+-----+------+

但是下面的代码以其他方式对齐：

<html>
    <head>
        <style>
            .common
            {
                border: 1px solid black;
                float: left;
            }

            #first
            {
                background: red;
                height: 100px;
                width: 50px;
            }

            #second
            {
                background: green;
                height: 50px;
                width: 50px;
            }

            #third
            {
                background: yellow;
                height: 50px;
                width: 50px;
            }
        </style>
    </head>
    <body>
        <div class="common" id="first">first</div>
        <div class="common" id="second">second</div>
        <div class="common" id="third">third</div>
    </body>
</html>

我不会使用绝对定位还有其他方法吗？

谢谢你。

Answer 1

您可以在容器div中包装第二个和第三个并首先浮动容器。

#first {
    float: left;
}

#container {
    float: left;
}

...

<div id="first></div>
<div id="container">
    <div id="second"></div>
    <div id="third"></div>
</div>

Answer 2

这里你去：http://jsfiddle.net/4CD2s/

#first {
    background: green;
    float: left;
    height: 300px;
    width: 100px;
}
#second {
    background: grey;
    height: 100px;
    margin-left: 105px;
    width: 100px;
}
#third {
    background: grey;
    height: 100px;
    margin: 5px 0 0 105px;
    width: 100px;
}

<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>

Answer 3

你可以使用固定的包装div宽度和溢出：隐藏来防止崩溃

直播示例：http://jsbin.com/isuse4

<强>代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  
    /TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrapper {width:150px; overflow:hidden;}
.common {
    border: 1px solid black;
    float: left;
}
#first {
    background: red;
    height: 100px;
    width: 50px;
}
#second {
    background: green;
    height: 50px;
    width: 50px;
}
#third {
    background: yellow;
    height: 50px;
    width: 50px;
}
</style>
</head>

<body>
<div id="wrapper">
  <div class="common" id="first">first</div>
  <div class="common" id="second">second</div>
  <div class="common" id="third">third</div>
</div>
</body>
</html>

Answer 4

我知道这样做的最简单方法是使用4个容器：

+-----+------+
|first|second|
|     |      |
|     |      |
|     |      |
|     |      |
+-----+------+

然后在第二个容器内再创建两个：

+-----+--------+
|first|second  |
|     | +----+ |
|     | |3rd | |
|     | |    | |
|     | +----+ |
|     | |4th | |
|     | |    | |
|     | +----+ |
|     |        |
+-----+--------+

漂浮第一和第二。不要给第二个容器任何视觉风格，只需定位它。根据需要将第3和第4个容器放在第2个容器内。 “内部”容器上没有额外的边距，它们将填充第二个容器的空间，因此第二个容器实际上是一个无形的指南，可帮助将它们放在原处，仅定位。

我更喜欢这种方法，因为它避免了任何边缘的怪癖，你需要做的就是调整两个小容器（第3和第4个）的位置就是调整第2个位置，它们一致地移动

Answer 5

先浮左

并给出第二个和第三个宽度的第二个和第三个

将DIV块列与另一个DIV块的一侧对齐

5 个答案: