1

親コンテナの50％に自動スケーリングされる、伸縮性のあるレイアウトのWebサイトに2つの画像を並べて表示するにはどうすればよいですか？

私は昨夜それで遊んでいましたが、行き過ぎませんでした。

私がdivを使って行ったとき、それらは互いに重なり合っているか、最初に2番目の画像が下に表示されていました。

テーブルを持って行くと、テーブルが画面よりも広くなり、垂直スクロールバーになります。

画像のサイズやユーザーの解像度は事前にわかりません。理想的には、JavaScriptを使用せずに純粋にcssで設定します。

設定することでコンテナに収まるように単一画像の自動スケーリングを使用して他のページで運が良かったのですmax-width:90%が、ここではこのトリックを適用できません。面白いことに、このシナリオのmax-widthはウィンドウ（親要素）に従って設定されますが、上記の例では、max-widthは画像自体の幅に従って設定されます。

私の英語は申し訳ありませんが、不明な点がある場合はお問い合わせください。

ありがとう

4

1 に答える 1

2

あなたの言っていることがわかります。幅が少し広すぎるという問題があったので、パーセント記号の端数をとらないので、マージンを少し外しました。これでうまくいくかどうかを確認してください。

<html>
<head>
<style>
div {
 width: 80%;
 background: #acf;
}
div img {
 width: 50%;
 padding: 0;
 margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>

<div>
 <img src='a.jpg' />
 <img src='b.jpg' />
</div>

</body>
</html>

編集：またはさらに良いことに、ボックス内の画像だけを持っている場合は、それをまったく折り返さないでください：

<html>
<head>
<style>
div {
 width: 80%;
 background: #acf;
 white-space: nowrap;
 overflow: visible;
}
div img {
 width: 50%;
 padding: 0;
 margin: 0;
}
</style>
</head>
<body>

<div>
 <img src='a.jpg' /><img src='b.jpg' />
 <!-- Don't put a space between the images. -->
</div>

</body>
</html>
于 2009-10-30T19:03:49.053 に答える