如何使用CSS在同一行上設置兩個元素

Question

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

目前我有2個圖像具有相同的大小，我希望同樣讓它們共享屏幕。 img a左手邊，img b右邊。問題是，如果我將它設置爲類，即使使用內聯塊，兩個圖像也會重疊。限制是我不能使用親戚。因此，有什麼辦法可以做到這一點？我是否需要爲每個圖像設置一個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 Fiddle Example

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：由於絕對定位，圖像越來越重疊。

希望這會有所幫助。