DIV没有使用CSS float对齐左上角和右上角
[英]DIVs not aligning top left and top right using CSS float
问题描述
Sorry a bit new to HTML and CSS but I have tried everything but i can't seem to get this to work. 
对不起有点新的HTML和CSS，但我已经尝试了一切，但我似乎无法让这个工作。 I have a top DIV and a bottom DIV. 我有一个顶级DIV和一个底部DIV。 The top DIV contains two more DIVs that need to be aligned left and right. 顶部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>
I want to see something like : 我希望看到类似的东西：
Top Left Top Right
-------------------------------------------
blah blah blah blah blah blah blah
But instead i get 但相反，我得到了
----------------------------
Top Left blah blah Top Right
It seems like the top DIV is getting its height set to zero. 看起来顶级DIV的高度设置为零。 Why i have no idea. 为什么我不知道。 I thought if you put something in a DIV it should automatically stretch itself? 我想如果你把东西放在DIV中它会自动伸展吗？
My actual code is : 我的实际代码是：
<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 个解决方案
解决方案1
6 已采纳 2013-03-28 14:33:36
Put overflow: hidden on the div that contains the two floats. 放overflow: hidden在包含两个浮点数的div上。
http://jsfiddle.net/SntpD/ http://jsfiddle.net/SntpD/
You could also use CSS :after , but it's a bit more complex. 你也可以使用CSS :after ，但它有点复杂。
.container:after {
clear: both;
display: block;
content: "";
height: 0;
}
解决方案2
2
You can use overflow: auto; float: none; clear: both 你可以使用overflow: auto; float: none; clear: both overflow: auto; float: none; clear: both overflow: auto; float: none; clear: both on the parent div . overflow: auto; float: none; clear: both在父div 。 overflow: hidden can also be used as suggested by @Explosion Pills. overflow: hidden也可以按照@Explosion Pills的建议使用。 but this is the cleaner and more compatible way 但这是更清洁，更兼容的方式
http://jsfiddle.net/pixelass/yPZQ9/ http://jsfiddle.net/pixelass/yPZQ9/
解决方案3
1 2013-03-28 14:34:43
You should apply a clearing to the parent div who is containing the floats (eg with the given markup) 您应该将清除应用于包含浮动的父div（例如，使用给定的标记）
body > div > div:first-child {
height: auto;
overflow: hidden;
}
(of course you should use a better selector for the sake of the perfomance) （当然你应该为了性能而使用更好的选择器）
解决方案4
1 2013-03-28 14:36:15
You can give width:50% to both of your divs inside the top Div. 您可以为顶部Div内的两个div提供width:50% 。
Take a look: 看一看：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.