Question

我有一个我正在为学校项目创建的网站。我是html和css的新手。我已经为页面的不同部分创建了div容器。在我的索引页面上，我有5个容器，包括页眉和页脚。

除了在我浮动图像的1个位置外，容器在任何地方都有效。出于某种原因，盒子在3张图像下收缩包装。我想通过在.container css规则中放置一个位置：relative，它会表现得像段落和其他元素一样。我希望那个容器能够像索引页面上的其他框一样包围图片。

以下是该特定容器的html无效：

 <div class="container">
        <article>
            <h2>Meet the Staff:</h2>
                <div class="gallery">
                    <figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" />
                        <figcaption>Mary the Librarian</figcaption>
                    </figure>
                </div>
                <div class="gallery">
                    <figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" />
                        <figcaption>Ruth the Assistant</figcaption>
                    </figure>
                </div>
                <div class="gallery">
                    <figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" />
                        <figcaption>Esther the Research Librarian</figcaption>
                    </figure>
                 </div>
        </article>
      </div>

这是css：

.container {
width: 1000px;
height: auto;
margin: auto;
margin-bottom: 25px;
padding: 0 20px;
position: relative;
background: #fff;
box-shadow: 0 0 10px #b5b2ab;

}

figure img {
border: 1px solid #666;
background-color: #fff;
padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);

}

figcaption {
font: Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;

}

figure {
display: block;
float: left;
width: 240px;
margin: 0 25px 25px 25px;

}

以下是您可以看到发生的事情：http://www.ta5zc.com/

感谢您提供的任何帮助。我似乎无法弄清楚出了什么问题。

Answer 1

令人尴尬，但我明白了。容器就像它应该的那样起作用。图像下方没有元素，因此没有任何内容可以保留。因此，当我浮动图像时，盒子就像它应该的那样向上移动页面。就像我说的，我是新人; - ）

当图像浮动时，具有位置相对收缩包装的容器

1 个答案: