這是我正在努力實現(xiàn)的目標...
“父”有位置:相對 “div 1-3”有位置:絕對 然而,每當我這樣做時,我發(fā)現(xiàn)自己必須在CSS中指定特定的“top”值。所以div 1可能是top:50px,div 2可能是top:150px,div 3可能是top:225 px;
有沒有一種方法可以確保div繼續(xù)在父對象中堆疊,而不需要分配上限值和/或絕對位置?
一個div應該已經(jīng)顯示為一個塊,并占據(jù)一個完整的“行”。下面是一些HTML和CSS的例子,將其與您的代碼進行比較:
http://jsfiddle.net/mWcWV/
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
<div class="child">Baz</div>
</div>
應該是直的:
HTML:
<div class="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
CSS:
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #ffbf00;
}
.red {
background-color: #f00;
width: 200px;
height: 150px;
margin: 5px auto;
}
.blue {
background-color: #0f0;
width: 200px;
height: 150px;
margin: 5px auto;
}
.green {
background-color: #00f;
width: 200px;
height: 150px;
margin: 5px auto;
}
檢查這把小提琴。
在css文件使用中...
div
{
display : block;
}
這將為每個div塊提供一個分隔線,這個特性是默認,不使用相對-絕對技術。
Div元素是塊元素,這意味著它們將占據(jù)一整行,并且它們旁邊的任何元素都將跳過一行。 只是做:
<div></div>
<div></div>
<div></div>
如果這不起作用,您可能需要將它們顯示為:inline-block;
去掉絕對定位就行了。使用margin:auto將div居中,然后提供您喜歡的任何垂直邊距。
您可以給內(nèi)部div留出邊距。
HTML:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<button class="child"></button>
</div>
CSS:
.parent {
display: block;
}
.child {
margin: auto;
}