浮动左右底部

我设置父div为相对，其他人为绝对和50％的宽度，但即使jsfiddle显示它不工作。我错过了什么？浮动左右底部

http://jsfiddle.net/kagawa_leah/3gcV9/1/

HTML：

<div class="border"> 
     <div class="left"> 
      <p>LEFT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p> 
     </div> <!--end left--> 
     <div class="right"> 
      <p> RIGHT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p> 
     </div> <!--end right--> 
    </div> <!--end border -->

CSS：

.border { 
position: relative; 
height: 100px; 
background-color: #000000; 
} 

.left {position: absolute; 
width: 50%; 
float:left; 
text-align:left; 
bottom: 4px; 
background-color:red; 
} 

.right {position: absolute; 
width: 50%; 
float:right; text-align:right; 
bottom: 4px; 
background-color: blue; 
}

来源

2011-12-27 leah_k

不能浮绝对定位的元素。您可能只想在每个元素上设置right/left。下面是一个例子小提琴：http://jsfiddle.net/ByVGf/1/

.border { 
position: relative; 
height: 100px; 
background-color: #000000; 
} 

.left {position: absolute; 
width: 50%; 
left: 0 
text-align:left; 
bottom: 4px; 
background-color:red; 
} 

.right {position: absolute; 
width: 50%; 
right: 0; 
text-align:right; 
bottom: 4px; 
background-color: blue; 
}

来源

2011-12-27 00:38:21 David

真棒！非常感谢你〜我想我太复杂了。你能告诉我为什么'right：0'将它推到边缘（以便我知道以备参考）？我注意到没有它，两个divs“左右摆动”，但只占用了左边的50％。 – 2011-12-27 00:51:08

我假设你想有两个div，在相等的两半拆分父。

.border { 

position: relative; 
height: 100px; 
background-color: #000000; 
} 

.sth { 
width: 50%; 
float:left; 
text-align:left; 
bottom: 4px; 
background-color:red; 
} 




<div class="border"> 
     <div class="sth"> 
      <p>LEFT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p> 
     </div> <!--end left--> 
     <div class="sth"> 
      <p> RIGHT Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. </p> 
     </div> <!--end right--> 
    </div> <!--end border -->

这是它的外观 http://jsfiddle.net/b2pC3/

来源

2011-12-27 00:44:00 Szajba

浮动左右底部

回答

相关问题