如何在另一个div中水平放置两个div
如何在另一个div中水平放置两个div
提问于 2008-11-27 12:20:40
我已经很长一段时间没有使用CSS了，目前没有参考资料。我的问题应该是相当简单的，但谷歌搜索并没有给出足够的答案。所以，加上集体的知识...
|#header---------------------------------------------------------------|
| TITLE |
|#sub-title------------------------------------------------------------|
|bread > crumb | username logout |
|#sub-left | #sub-right|
|---------------------------------|------------------------------------|这就是我想要的布局。不管怎么说，标题。我希望副标题包含左下角和右下角。我使用什么css规则来确保一个div被另一个div的属性绑定。在这种情况下，如何确保左下角和右下角留在副标题内？
回答 13
Stack Overflow用户
回答已采纳
发布于 2008-11-27 19:50:23
虽然foxy的答案是正确的，但你并不需要那个非语义的、无用的clear:both div。您需要做的就是将一个overflow:hidden粘贴到容器上：
#sub-title { overflow:hidden; }Stack Overflow用户
发布于 2008-11-27 12:46:29
当您浮动sub-left和sub-right时，它们不再占用sub-title中的任何空间。您需要添加另一个带有style = "clear: both"的div，以展开包含的div，否则它们将显示在其下方。
HTML：
<div id="sub-title">
<div id="sub-left">
sub-left
</div>
<div id="sub-right">
sub-right
</div>
<div class="clear-both"></div>
</div>CSS：
#sub-left {
float: left;
}
#sub-right {
float: right;
}
.clear-both {
clear: both;
}Stack Overflow用户
发布于 2008-11-27 12:39:33
这应该会实现您想要的结果：
<html>
<head>
<style type="text/css">
#header {
text-align: center;
}
#wrapper {
margin:0 auto;
width:600px;
}
#submain {
margin:0 auto;
width:600px;
}
#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Head</h1></div>
<div id="sub-main">
<div id="sub-left">
Right
</div>
<div id="sub-right">
Left
</div>
</div>
</div>
</body>
</html>您可以使用wrapper类控制整个文档，也可以使用sub-main类仅控制两列。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/323599
复制相关文章
相似问题
腾讯云开发者
