色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我如何在父級中自動垂直堆疊div?

方一強1年前7瀏覽0評論

這是我正在努力實現(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;
}