1

1 つの画像の上に複数行のテキストを均等に配置したいと考えています。

次のように隣接するセレクターを使用すると思いました：

.text-box + .text-box{
    margin-top:40px;
}

連続するすべての要素間に40ピクセルの間隔を導入しtext-boxますが、2番目と最初の要素の間でのみ機能することがわかったので、3番目の要素は2番目の要素と同じ位置に配置されます。つまり、最初の要素から40ピクセルのマージンがあります要素、2 番目の要素から 40 ピクセルのマージンを期待していたので、最初の要素から 40 + 40 ピクセルのマージンを期待していました。

そのようにすることは可能ですか？

これは私のコードです: CSS:

.text-box{
    z-index:100;
    position:absolute;
    right: 600px;
    background-color:#404042;
    color:#ffffff;
    padding:6px 10px;
}

.text-box + .text-box {
    margin:40px 0px;
}

HTML:

<div class="container">
    <div id="logo"><img src="images/image.jpg"></div>
    <div class="text-box">some text</div>
    <div class="text-box">some other text</div>
     <div class="text-box">some other text</div>
 </div>
4

1 に答える 1

0

問題はあなたの絶対位置にあります。それを取り除くと、余白を適用できます。

画像の上にテキストを表示したデモ (意図しているようです): http://jsfiddle.net/EqXYA/1/

于 2012-09-18T15:39:17.693 に答える