Question

我 - 我认为 - 一个非常简单的问题我想对齐4个不同的DIV：

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
           CCCCCCCCCCCC
           CCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

4个DIV仅为文本，长度可变 C是“浮动：正确;” DIV
为了避免C和D之间的重叠，D有一个“清楚：两者都有”;指令。

我的问题：我在D的顶部有一个很大的空白区域，就像那样：

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
           CCCCCCCCCCCC
           CCCCCCCCCCCC




DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

我不明白为什么......有人可以帮助我吗？

顺便说一句，如果我不说“明确：两者兼而有之”。 D DIV中的指令，我有重叠：

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
DDDDDDDDDD CCCCCCCCCCCC
DDDDDDDDDD CCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

我的CSS非常简单：

.A {
width: 200px;
}

.B {
width: 100px;
}

.C {
width: 100px;
float: right;
}

.D {
clear: both;
width: 200px;
}

Answer 1

这是怎样的（ASCII和全部）

http://jsfiddle.net/Mutant_Tractor/9z3ru/1/

CSS：

#wrap {
    width:200px;
}
#as {
    width:200px;;
    clear:both;
}
#bs {
    width:100px;
    float:left;
}
#cs {
    width:100px;
    float:right;
}
#ds {
    clear:both;
}

Answer 2

Myles如何做到这一点略有改变。带有A的div也是全长的。

http://jsfiddle.net/Q4xEG/2/

DIV位置（xhtml / css）

2 个答案:

CSS：