html - CSS を使用して同じ行に 2 つの要素を設定する方法

Question

.image{
position:absolute;
display:inline-block;
}

現在、同じサイズの画像が 2 つありますが、均等に画面を共有したいと考えています。左側が画像 a、右側が画像 b です。問題は、クラスとして設定すると、インラインブロックを使用しても2つの画像が重なってしまうことです。制限は、相対を使用できないことです。したがって、これを達成する方法はありますか？これを行うには、各画像に ID を設定する必要がありますか? ありがとう

Answer 1

幅がビューポートの 50% を共有し、高さがビューポートの 100% になるようにしようとしていますか? これは次の方法で実現できます。

HTML:

<img src="source.html" />
<img src="source.html" />

CSS:

html, body {
    width: 100%;
    height: 100%;
}

img {
    ​width: 50%;
    height: 100%;
    float: left;
}​

JS フィドルの例

Answer 2

これが私が試したサンプルコードです。

<div id="container">
    <img src="http://www.rational-animal.org/wp-content/uploads/2012/02/Facebook-logo-small-300x300.png" height="100" width="100" />
    <img src="http://www.rational-animal.org/wp-content/uploads/2012/02/Facebook-logo-small-300x300.png" height="100" width="100" />
</div>

そしてこれがCSSになります

img {
    width: 50%;
    height: 100%;
    float: left;
    display: inline-block
}

上記の結果です。それはあなたが探しているものですか？

PS: 絶対配置のため、画像が重なっています。

お役に立てれば。