浮動左右底部

我設置父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

浮動左右底部

回答

相關問題