html - 左右浮动

Question

我将父级 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

你不能 float 绝对定位的元素。您可能只想在每个元素上设置 right/left。这是一个示例 fiddle :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;
}