DIVs不使用CSS浮动左上角和右上角

问题描述：

对不起有点新的HTML和CSS，但我尝试了一切，但我似乎无法得到这个工作。我有一个顶部DIV和一个底部DIV。顶部DIV包含两个需要左右对齐的DIV。DIVs不使用CSS浮动左上角和右上角

<!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>

答

把overflow: hidden上包含两个float股利。

http://jsfiddle.net/SntpD/

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

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

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

感谢那个把我的样本代码的伎俩。但现在，我在我的实际代码中尝试它，在Firefox中，它似乎堆叠在彼此顶部的“左”和“右”。似乎只发生在FF –

@OliverWatkins你能告诉我吗？ –

我已将它添加到我的帖子底部。谢谢！！！ –

答

，应以清算到谁是含有浮动（与给定的标记例如）父DIV

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

（当然你应该使用一个更好的选择为性能的缘故）

答

你可以给width:50%两个你的divs在顶级Div内。

请看：

http://jsfiddle.net/v5Dn3/

答

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

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

DIVs不使用CSS浮动左上角和右上角

相关推荐