[英]Filling sides of a centered div?
我想填充一個居中的div的兩側,每側有另一個div或span。
我正在使用邊距將div放在中心,就像這個小提琴一樣。
HTML
<div id='A>
<div id='Ad'>
</div>
</div>
CSS
#A{
z-index: 3000;
position: fixed;
width: 100%;
height: 40px;
background: rgba(0,0,0,0.05);
}
/*
div or span to the left
*/
/*
centered div
*/
#Ad{
z-index: 3000;
width: 400px;
height: 40px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
/*
div or span to the right
*/
我怎么能有一個總是占用左邊剩余空間的div和另一個占據右邊剩余空間的div。
澄清:
中心列需要是恆定寬度。 左列和右列隨窗口大小而變化。
這將實現您想要的 - 它允許您有一個固定寬度的中央div,左右列填充剩余的空間:
HTML:
<div id="A">
<div id="Ad">Centre</div>
<div id="left">Left</div>
<div id="right">Right</div>
</div>
CSS:
#A {
z-index: 3000;
position: fixed;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.05);
}
/*
centered div
*/
#Ad {
z-index: 3000;
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
#left, #right {
position:absolute;
left:0;
top:0;
right:50%;
margin-right:200px;
background:#F00;
height: 400px;
}
#right {
left:50%;
right:0;
margin-left:200px;
margin-right:0;
}
關鍵是左/右邊距是中心列總寬度的一半,因此調整它以考慮任何邊框或填充。
工作示例: http : //jsfiddle.net/2AztF/
我只想在主容器中使用3 <div>s
HTML:
<div id='A'>
<div id='AdLeft'></div>
<div id='Ad'></div>
<div id='AdRight'></div>
</div>
CSS:
#A { overflow:auto }
#AdLeft { float:left; width:25%; }
#Ad { float:left; width:50%; }
#AdRight { float:left; width:25%; }
這是一個修改過的jsfiddle 。
要填充div代碼右側和左側的空間,請確保在這些側面沒有邊距或填充。
float:right;
float:left;
HTML:
<div class='container'>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.right { float: right; width: 150px; }
.center{ float: right; width:50px; margin-right: 50px; }
.left{ float: left; width: 150px; }
.center的邊距將相應地填充空間。
制作3個div:
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div style="clear:both"></div>
CSS:
#A,#B,#C{
float:left;
width:10%;
}
#B{
width:80%;
}
在這里,B是你的主要div。 最好在使用float屬性時清除它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.