左右浮动

Question

我将父div设置为相对，其他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;
}

Answer 1

您不能浮动绝对定位的元素。 您可能只想在每个元素上设置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;
}

Answer 2

我假设您想拥有两个将父级等分的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/