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>

Answer 2

最快的方法是更改类的元素中的id，所以：

<div class="images">
    <figure>
        <img src="photos/image1.jpg" alt=”Photo” width=150 height=150>
    <figcaption>Watch #1</figcaption>
    </figure>
</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在页面上应该是唯一的，而类可以根据需要复制。

Answer 3

ID属性是唯一标识符，因此是must be unique。您目前有三个具有相同ID的元素;这是无效的。您可以使用类来代替使用ID：

<div class="images">
    ...
</div>

更改CSS以使用类选择器而不是ID选择器：

.images {
    ...
}

Answer 4

尝试将#images更改为.images并将其用作div的类，如下所示：

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

}

HTML：

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

Answer 5

ID是元素的唯一属性，只能在页面上使用一次。

您可以采取以下措施解决问题：

工作演示：JSFiddle

<强> HTML：

<div class="images">
    <figure>
        <img src="http://placehold.it/150x150" alt="Photo" />
        <figcaption>Watch #1</figcaption>
    </figure>
</div>
<div class="images">
    <figure>
        <img src="http://placehold.it/150x150" alt="Photo" />
        <figcaption>Watch #2</figcaption>
    </figure>
</div>
<div class="images">
    <figure>
        <img src="http://placehold.it/150x150" alt="Photo" />
        <figcaption>Watch #3</figcaption>
    </figure>
</div>
<div class="clearfix"></div>

<强> CSS：

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

.clearfix {
    clear: both;
}

我冒昧地添加<div class="clearfix"></div>，这确保页面上没有其他元素（在这三个div下面）由于使用了浮动而被移位。

Answer 6

页面中的ID必须是唯一的。如果要描述一组元素，请使用类。

why we should not use id selector two times in a page while its working fine.

您正在制作错误，并且会根据每个浏览器查看该页面以进行补偿。你不能确定他们都会。

尝试使用类而不是

.images{
/*Your Css*/
}

Answer 7

您获得“重复ID引用”，因为您多次使用相同的ID。您将需要使用类来代替。

您还需要使用</img>

关闭图片代码

这是一个小提琴，显示我已经改变的内容：http://jsfiddle.net/litari/rWSGS/

Div CSS中的多个图像

7 个答案: