2

1行に表示する必要があり、合計幅がページ幅よりも大きい画像（3）がいくつかあります。しかし、とにかくそれらをオーバーラップさせたいので、ページ幅は重要ではありません。しかし、何らかの理由で、1行に2つの画像、次の行に3番目の画像しか表示されません。これを整理するにはどうすればよいですか。私が.imageContainerasposition:aboluteを作成し、left:--px各IDに値を指定すると、これらは完全に機能します。しかし、それを維持し、調整することは難しいでしょう。また、各画像の幅を狭くすると正しく整列しますが、それはしたくありません:(。助けてください。

white-space:nowrap;allImagesContainerに配置されたUPDATEはこの問題を解決しましたが、Chromeでのみです。この問題はFFとIEでも解決しません。

コードは次のとおりです。

<div class="allImagesContainer">
<div class="imageContainer" id="firstImage">
    <img  src="images/android1.png"/>
    <div class="innerText"></div>
</div>

<div class="imageContainer" id="biggerImage" >
    <img src="images/android2.png"/>
    <div class="innerText"></div>
</div>

<div class="imageContainer" id="lastImage">
    <img src="images/android3.png"/>
    <div class="innerText"></div>
</div>
</div>

そして、これがスタイリングです：

.allImagesContainer {
position: relative;
top: 50px;
width: 80%;
height: 500px;
margin-left: auto;
margin-right: auto;
display: table ;
}

.imageContainer{
position: relative;
display: inline-block;
}

#firstImage{
z-index: 1;
}

#biggerImage{
position: relative;
left: -50px;
z-index: 2;
}

#lastImage{
position: relative;
left: -40px;
z-index: 1;
}
4

2 に答える 2

0

white-space:nowrap;あなたが探しているものであり、allImagesContainer

デモを見る

于 2013-03-23T10:59:21.623 に答える
0

改行が必要ない場合は、allImagesContainerでこのcssを使用できます

.allImagesContainer
{
  white-space:nowrap;
}

位置を削除できます：すべての要素の絶対および相対ですが、display：inline-blockは保持します

于 2013-03-23T11:45:57.677 に答える