我想将“ rightBottomPart”放置在“ rightPart”的底部,并且我希望“ rightPart与“ leftPart”一样高.问题是我不知道“ leftPart”中内容的高度,因此我可以’t设置“文本”的高度(“文本”中的高度将解决该问题)
现在看起来像这样：
我希望它看起来像这样：
@L_502_1@
我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body style="margin: 0px 0px 0px 0px;">
<div id="headers" style="background-color: Olive; width: 300px; height: 50px;"></div>
<div id="text" style="background-color: Navy; position: relative; width: 300px;">
<div id="leftPart" style="background-color: Gray; width: 200px; float: left;">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="rightPart" style="background-color: Red; float: right;">
<div id="rightTopPart" style="background-color: Lime; position: absolute; right: 0px; top: 0px;">top</div>
<div id="rightBottomPart" style="background-color: Yellow; position: absolute; right: 0px; bottom: 0px;">bottom</div>
</div>
</div>
</body>
</html>
在IE7中看起来不错,但在我测试过的其他浏览器中却没有.如果我删除DOCTYPE标记,则在IE8中看起来也不错,但在Google Chrome中仍然不行.
我想念什么？
谢谢
卡尔
最佳答案
要控制浮动和位置,您需要牢记两点：根据其父元素的位置是绝对的,通常需要标注尺寸,并且浮动对象默认没有尺寸.
由于您的测试代表一个简单的两列模型,因此请在此处查看此概述,它可能会使您有所了解：equal height columns with css
因此,这里的技巧是给#text一个浮点数和pos：rel,然后#right * Part知道它们的位置.
在这里看看：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
body { margin: 0; }
#headers { background: Olive; width: 300px; height: 50px; }
#text { background: Navy; position: relative; width: 300px; display: block; float:left; }
#leftPart { background: Gray; width: 200px; float: left; display: inline-block; }
#rightPart { background: Red; }
#rightTopPart { background: Lime; position: absolute; right: 0; top: 0; }
#rightBottomPart { background: Yellow; position: absolute; right: 0; bottom: 0; }
</style>
</head>
<body>
<div id="headers"></div>
<div id="text">
<div id="leftPart">Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="rightPart">
<div id="rightTopPart">top</div>
<div id="rightBottomPart">bottom</div>
</div>
</div>
</body>
</html>
亲切的问候
