将div与CSS并排放置
[英]Position div side by side with css
问题描述
我的页面中有这个简单的布局
<div id="content-wrap">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="content" style="height: 550px">
</div>
</form>
</div>
和CSS：
#content-wrap
{
clear: both;
float: left;
width: 100%;
}
#content
{
text-align: left;
padding: 0;
margin: 0 auto;
height: 470px;
overflow: auto;
width: 760px;
}
div的“内容”位于包装内部，我想做的是在左侧的“内容”旁边放置另一个div，并以200px的宽度固定。 我怎样才能做到这一点？
在此先感谢您的帮助。
2 个解决方案
解决方案1
1 已采纳 2010-07-11 12:21:10
对不起，我看错了你想要的。 看看这是否更好。
<html>
<head>
<style type="text/css">
#content-wrap
{
background-color: #EEE;
clear: both;
float: left;
width: 100%;
}
#content
{
background-color: #0F0;
text-align: left;
padding: 0;
margin: 0 auto;
height: 470px;
width: 760px;
}
#leftbar
{
background-color: #F00;
float: left;
width: 200px;
height: 470px;
margin-left: -200px;
}
</style>
</head>
<body>
<div id="content-wrap">
<form id="form1" runat="server">
<div id="content">
<div id="leftbar">
</div>
</div>
</form>
</div>
</body>
</html>
解决方案2
0 2010-07-11 12:44:12
您可以居中对齐#content-wrap div，然后对其中的两个内部div使用绝对定位。 您使用的是固定宽度的div，因此我认为这不是问题。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
#content-wrap {
position: relative;
margin: 0 auto;
width: 900px;
height: 600px;
background: #eeeeee;
}
#content {
position: absolute;
left: 215px;
width: 470px;
height: 600px;
background: #cccccc;
}
#sidebar {
position: absolute;
background: #aaaaaa;
left: 0;
height: 600px;
width: 200px;
}
</style>
</head>
<body>
<div id="content-wrap">
<div id="content"></div>
<div id="sidebar"></div>
</div>
</body>
</html>
CSS：如何将子div并排放置在主div中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.