css - 如何水平对齐嵌套的div？可能有反应？

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;
}