将div与CSS并排放置
[英]Position div side by side with css
问题描述
I have this simple Layout in my page 
我的页面中有这个简单的布局
<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>
And the css: 和CSS：
#content-wrap
{
clear: both;
float: left;
width: 100%;
}
#content
{
text-align: left;
padding: 0;
margin: 0 auto;
height: 470px;
overflow: auto;
width: 760px;
}
The div "content" is centered inside the wrap, what I'd like to do is to put another div next to "content" on the left side floating and fixed with 200px almost of width. div的“内容”位于包装内部，我想做的是在左侧的“内容”旁边放置另一个div，并以200px的宽度固定。 How can I do that? 我怎样才能做到这一点？
Thanks in advance for any help. 在此先感谢您的帮助。
2 个解决方案
解决方案1
1 已采纳 2010-07-11 12:21:10
Sorry I misread what you wanted. 对不起，我看错了你想要的。 See if this is any better. 看看这是否更好。
<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
You could centre align the #content-wrap div, then use absolute positioning inside it for the two inner divs. 您可以居中对齐#content-wrap div，然后对其中的两个内部div使用绝对定位。 You are using fixed-width divs, so I don't think this should be a problem. 您使用的是固定宽度的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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.