divに画像を縦に積み重ねる方法

3つの画像を含むdivが必要なので、画像を縦に積み重ねてください。
divの幅を画像の幅に設定しても、それは何もしません。ここに私のコードです:

.detailImgWrapper
    {
    display: inline;
    position: relative;
    width: 25px;
    top:-210px;
    }

.detailImgWrapper img
    {
    visibility: hidden;
    padding: 0;
    padding-top: 10px;
    display: inline;
    width: 25px;
    height: 25px;
    }

見ていただきありがとうございます。

4
あなたはjsfiddle.netを使ってリンクを送ることができますか?私はあなたのimgタグのためのdisplay:blockを設定するのがなぜあなたが望むものを達成しないのか理解していません(Aaronが示唆するように)。
追加された 著者 Edouard Tabet,

2 答え

画像を display:block に設定し、縦に積み重ねてください。

11
追加された
私もそう思いました。私がそれをすると、div内だけでなく、ウィンドウ全体に改行が適用されます。
追加された 著者 Dale,
私がimgをdisplay:blockに変更した場合、それも包含divに適用されるようです。
追加された 著者 Dale,
@ jblasco jsFiddleありがとう。私はそれを修正して私の正確な問題を作り出しました。 3つの垂直に積み重ねられた画像を含むdivが、ここで作成した他の(35x35)divの右側にあるようにしたいと思います。 jsfiddle.net/QqJRR/1 私はこれらの問題のどちらか一方のみを解決することはできますが、両方を解決することはできません同時に。ありがとう。
追加された 著者 Dale,
inline-block メソッドを使用する場合は、 vertical-align プロパティを top を使用してフローティングブロックと同じ効果を実現します。 ( jsfiddle.net/QqJRR/4 )また、インラインブロックは古いブラウザ(つまりIE6)、浮動小数点ブロックがおそらくあなたの最良の選択です。彼らの親が彼らの身長を認めるようにするために、あなたのフローティングディヴィジョンの下にクリアリング要素を置くことを忘れないでください。
追加された 著者 Aaron,
これは動作しませんか? jsfiddle.net/jblasco/QqJRR
追加された 著者 justis,
これは、 float:left を使用することで実現できます。 jsfiddle.net/jblasco/QqJRR/2 または display:inline-block jsfiddle.net/ jblasco/QqJRR/3
追加された 著者 justis,

displayとparentの組み合わせ:displayとしてのインラインと子:blockは、要素を次元とともに水平に並べるテクニックです。表示:ディメンションを与えるにはブロックが必要です(私はあなたのケースのパディング)。

あなたが書いたコードは、画像を縦に積み重ねるのではなく、画像を横に並べることに働いているようです。だから、私はディスプレイがどのような機能を果たしているのだろうか:インラインが親に役立っているのだろうか?

1
追加された