3

抱歉，对 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>
4

4 回答 4

6

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

http://jsfiddle.net/SntpD/

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

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

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

于 2013-03-28T14:33:36.173 回答
2

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

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

于 2013-03-28T14:38:30.990 回答
1

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

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

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

于 2013-03-28T14:34:43.070 回答
1

您可以width:50%在顶部 Div 中给您的两个 div。

看一看：

http://jsfiddle.net/v5Dn3/

于 2013-03-28T14:36:15.220 回答