4

「content1」という名前のコンテナー div があり、理想的には、それぞれに 1 つの画像といくつかのテキストを含む 3 つの div を含めたいと考えています。

ブラウザ ウィンドウが小さすぎない限り、これら 3 つのネストされた div を隣り合わせに配置したいと考えています。現在、divは互いに重なり合っています....

誰かが私を正しい方向に向けることができますか?

私の現在の（そして明らかに間違っている）設定は次のとおりです。

HTML

> <div id="content1">
    <div id="item1"><img src="EXAMPLE URL"><br>example text example text example text</div>
    <div id="item2"><img src="EXAMPLE URL"><br>example text example text example text</div>
    <div id="item3"><img src="EXAMPLE URL"><br>example text example text example text</div>
</div>

CSS

#content1 {
    padding: 20px;
    margin-top: 17px;
    margin-bottom: 17px;
    margin-left:auto;
    margin-right:auto;
    width:70%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.25);
    border-bottom-right-radius: 50px 50px;
    border-bottom-left-radius: 50px 50px;
    border-top-left-radius: 50px 50px;
    border-top-right-radius: 50px 50px; }

#item1 {
    position: relative;
    margin-left:auto;
    margin-right:auto;
    color: white;
    font-family:'Oswald';
    text-align: center;
    font-size: 18px;
    width: 80&;
    max-width: 60%;
    padding: 2px;
  }
  #item1 img {
    position: relative;
    margin-left:auto;
    margin-right:auto;
    max-width: 100%;
    height: auto;
  }

これらの 3 つの div を並べて表示し、ネストされた "content1" div 内で応答できるようにする方法を誰かが知っている場合は、非常に感謝しています。

4

2 に答える 2

2

これを試してください：

#content1 > div{
float:left;
}
于 2013-08-03T00:00:23.573 に答える
-2

http://learnlayout.com/

これをチェックしてください。これは、私が今まで出会った中で最も包括的な基本的な CSS レイアウト ガイドです。そこで答えを得る必要があります。

于 2013-08-02T22:57:47.977 に答える