Question

我有一个名为“content1”的容器div，我希望包含三个div，每个div包含一个图像和一些文本。

我希望这三个嵌套的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;
  }

如果有人知道如何让这三个div并排并且可能在嵌套的“content1”div中响应，我将非常感激。

Answer 1

试试这个：

#content1 > div{
float:left;
}

Answer 2

http://learnlayout.com/

检查一下。这是我遇到过的最全面的基本CSS布局指南。你必须在那里得到答案。

如何水平对齐嵌套的div？可能响应？

2 个答案: