抱歉，我对 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 中它应该会自动拉伸(stretch)？
我的实际代码是:
<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>
最佳答案
将 overflow: hidden 放在包含两个 float 的 div 上。
您也可以使用 CSS :after，但它有点复杂。
.container:after {
clear: both;
display: block;
content: "";
height: 0;
}
关于css - DIV 不使用 CSS float 对齐左上角和右上角，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15684533/