2
私は、3つの背景画像を並べて整列しようとしています。流動的で理想的です。ブラウザウィンドウのサイズが変わったときに再配置されます。3つの背景画像を並べて並べる方法
私はこの問題の答えを探してみましたが、通常の 'img src'要素を整列させるのに適したCSSプロパティを使用しても問題はありませんでした。
本質的に、ギャラリーがあるページがあります。各画像には、その中心に都市名があります。研究を通じて、私は3つの別々のdivに背景画像プロパティを割り当て、各画像の高さに一致するline-heightプロパティを使用して、都市名が中央に揃うようにしました。背景画像技術は、都市名のアラインメントを支援する。
どこが間違っていますか？
#jumbotron2 {
height: 500px;
width: 100%;
}
#city-container {
width: 100%;
height: 100%;
}
.london-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/london-400px.jpg")
}
.newyork-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/newyork-400px.jpg")
}
.sydney-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/sydney-400px.jpg")
}
.square p {
font-family: 'Slabo 27px', serif;
font-size: 32px;
color: #FFFFFF;
line-height: 400px;
text-align: center;
text-shadow: 0px 0px 10px black;
}<div id="jumbotron2">
<div id="city-container">
<div class="london-square square">
<p id="text">London</p>
</div>
<div class="newyork-square square">
<p id="text">New York</p>
</div>
<div class="sydney-square square">
<p id="text">Sydney</p>
</div>
</div>
</div>
まあが、それらはすべて固定幅を持っている： '幅：400ピクセルを;'、あなたは、例えば、割合のためにそれをスワップアウトしようとしています'幅：30％;'？ – DBS
フロートをする必要があると思います：水平に整列させるために、3つすべてに左に移動します。 または表示：レイアウトに応じて、インラインブロックも同様に機能します。 フロートルートを下った場合、3つのdivのコンテナにclearfixを追加する必要があります。 clearfixを検索すると、たくさんの回答が見つかるはずです。 – klikas
@DBS - 各画像は400pxのネイティブなので、％を指定すると、意図したよりも小さくなります。 –