[英]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的寬度固定。 我怎樣才能做到這一點?
在此先感謝您的幫助。
對不起,我看錯了你想要的。 看看這是否更好。
<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>
您可以居中對齊#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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.