Question

对不起有点新的HTML和CSS，但我已经尝试了一切，但我似乎无法让这个工作。我有一个顶级DIV和一个底部DIV。顶部DIV包含两个需要左右对齐的DIV。

<!DOCTYPE html>
<html>
<body>
    <div>
        <div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(187, 187, 187);">
            <div style="font-size: 30px; float: left;">Top Left</div>
            <div style="font-size: 30px; float: right;">Top Right</div>
        </div>
        <div >blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
            blah blah blah blah blah blah blah blah blah blah blah blah
            blah blah blah
        </div>
    </div>
</body>
</html>

我希望看到类似的内容：

Top Left                          Top Right
-------------------------------------------

blah blah blah blah blah blah blah

但我得到了

----------------------------
Top Left blah blah Top Right

看起来顶级DIV的高度设置为零。为什么我不知道。我想如果你把东西放在DIV中它会自动伸展自己吗？

我的实际代码是：

<div style="border-bottom: 1px solid rgb(187, 187, 187); overflow: auto; clear: both; padding: 15px;">
    <div style="font-size: 30px;">Bearbeiten</div>
    <div style="font-size: 30px; width: 50px;">X</div>
</div>
<div style="position: absolute; bottom: 10px;"><input style="font-size: 15px; height: 30px; width: 130px;"
                                                      value="Cancel" class="OverlayButton" id="Overlay.CancelButton"
                                                      type="button"><input
        style="font-size: 15px; height: 30px; width: 130px;" value="Save" class="OverlayButton" type="button"><input
        style="font-size: 15px; height: 30px; width: 130px;" value="Delete" class="OverlayButton" type="button"></div>

Answer 1

将overflow: hidden放在包含两个浮点数的div上。

http://jsfiddle.net/SntpD/

你也可以使用CSS :after，但它有点复杂。

.container:after {
    clear: both;
    display: block;
    content: "";
    height: 0;
}

http://jsfiddle.net/SntpD/1/

Answer 2

您可以在父overflow: auto; float: none; clear: both上使用div。 {@ 1}}也可以按照@Explosion Pills的建议使用。但这是更清洁，更兼容的方式

http://jsfiddle.net/pixelass/yPZQ9/

Answer 3

您应该将清算应用于包含浮动的父div（例如，使用给定的标记）

body > div > div:first-child {
    height: auto;
    overflow: hidden;
}

（当然，为了达到性能，你应该使用更好的选择器）

Answer 4

您可以将width:50%提供给顶部Div内的两个div。

看看：

http://jsfiddle.net/v5Dn3/

DIV没有使用CSS float对齐左上角和右上角

4 个答案: