代码之家 › 专栏 › 技术社区 › rodnower

从另一个DIV块旁边对齐DIV块的列

xhtml css

rodnower · 技术社区 · 15 年前

我想在这样一个男人身上画一个分块:

+-----+------+
|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>

我不会使用绝对定位。
还有别的办法吗?

谢谢你的帮助。

5 回复 | 直到 15 年前

digitaldreamer 15 年前

您可以将第二个和第三个包装在容器div中,并浮动容器和第一个。

#first {
    float: left;
}

#container {
    float: left;
}

...

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

Brandon Durham 15 年前

给你: 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>

Sotiris Adrian J. Moreno 15 年前

您可以使用固定的包装器div宽度和overflow:hidden来防止折叠

实例: 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>

Surreal Dreams 15 年前

我知道最简单的方法是使用4个容器:

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

然后在第二个容器中再创建两个:

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

浮起第一个和第二个。不要给第二个容器任何视觉样式,只要定位它。根据需要将第3个和第4个容器放入第2个容器中。“内部”容器上没有多余的边距,它们将填满第二个容器的空间,因此第二个容器实际上是一个无形的向导,可以帮助将它们放在它们要去的地方,只进行定位。

我更喜欢这种方法,因为它避免了边距的任何变化,而要调整两个小容器(第三个和第四个)的位置,你所要做的就是调整第二个容器的位置,它们一直跟着它移动。

PeeHaa 15 年前

先左浮动

给第二个和第三个第一个的宽度