web-dev-qa-db-ja.com

親の中でdivを自動的に垂直にスタックするにはどうすればよいですか？

これが私が達成しようとしていることです...

  1. 「親」にはposition：relativeがあります
  2. 「div 1-3」の位置：絶対

ただし、これを行うたびに、CSSで特定の「トップ」値を割り当てる必要があります。したがって、div 1はtop：50px、div 2はtop：150px、div 3はtop：225pxです。

上位の値や絶対位置を割り当てずに、divが親内でスタックし続けることを確認する方法はありますか？

csshtmlpositionparent
23
Fingeldor

divはすでにブロックとして表示され、完全な「行」を占めるはずです。以下に例を示し、コードと比較するための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>
23
Joseph

まっすぐにする必要があります：

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;
}

これを確認してください fiddle 。

3
TheVillageIdiot

cssファイルで使用...

div
{
    display : block;
}

これは各divブロックにブレークラインを与え、その機能はデフォルトでrelative-absoluteテクニックを使用しません。

2
Osahady

Div要素はブロック要素です。つまり、Div要素は行全体を取り、その隣の要素は行をスキップします。ただやる：

<div></div>
<div></div>
<div></div>

それでもうまくいかない場合は、おそらく表示する必要があります。インラインブロック。

2
user1834464

絶対位置を削除するだけです。 margin:autoを使用してdivを中央に配置し、好きな垂直マージンを提供します。

0
Mike Brant

内側のdivにマージンを与えることができます。

0
Gunjan Kothari