Question

我将父div设置为relative，其他设置为绝对宽度和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/

浮在左下方

2 个答案: