html - Div CSS 中的多个图像

Question

我正在制作一个简单的 css Box 布局，图像向左浮动，当我将它们放在单独的 div 中时效果很好:

<div id="images">
    <figure>
        <img src="photos/image1.jpg" alt=”Photo” width=150 height=150>
    <figcaption>Watch #1</figcaption>
    </figure>
    </div>

<div id="images">
    <figure>
        <img src="photos/image2.jpg" alt=”Photo” width=150 height=150>
    <figcaption>Watch #2</figcaption>
    </figure>

</div>

<div id="images">

    <img src="photos/image3.jpg" alt="Photo" width="150" height="150">

</div>

CSS:

#images {
    float:left;
    border-style:solid;
    border-width:3px;
    padding:20px;
    margin:5px;
    height:220px;
    width:220px;
    overflow:hidden;
    text-align:center;

}

但是我收到一个错误:“重复的 ID 引用”我已经用谷歌搜索了，它告诉我这绝对应该避免，

但每次我将所有图像添加到 div 中时，我的代码都不起作用，它们最终无处不在。谁能帮忙？

干杯

Answer 1

试试这个代码 DEMO

<div class="container">
    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
      <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
      <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
      <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
      <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>