0
私は学校のプロジェクトのために作成しているウェブサイトを持っています。私はhtmlとcssにはとても新しいです。私は自分のページの異なるセクションのdivコンテナを作成しました。私のインデックスページには、ヘッダとフッタを含む5つのコンテナがあります。画像を浮かせると位置関係のシュリンクラップを持つ容器
コンテナは、フローティングイメージである1つの場所を除くすべての場所で動作しています。何らかの理由で、箱は3枚の画像の下にシュリンク包装されています。私はposition：relativeを.container CSSルールに置くことによって、それがパラグラフや他の要素と同じように動作すると考えました。私はそのコンテナがインデックスページの他のボックスと同じように写真を囲むようにしたいと思います。ここで
が動作していないこと、特定のコンテナの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/
おかげで。何が間違っているのかわからない。