图片库/浮动问题

Question

我在让图片库按照我想要的方式运行时遇到了一些麻烦。照片堆叠在一起，而不是并排放置。我尝试使用 float 属性，但我认为我做错了。任何帮助将不胜感激，谢谢！

HTML:

<div class="gallery">

    <img src="art/abstract.jpg"><div class"gallery">Abstract Painting</div>

    <img src="art/graphite.jpg"><div class"gallery">Graphite Drawing</div>...

CSS:

.gallery img {
    display:inline-block;
    width:350px;
    height:350px;
    margin:2px;
    float:left;
    padding-bottom:10px;
    padding-left:5px;
}

.gallery {
    float:left;
    text-align:center;
}

Answer 1

只需使用额外的 div（下面有 class .wrapper）用它的描述包裹图像，然后浮动它：

<div class="gallery">
    <div class="wrapper"><img src="art/abstract.jpg"/><div class"gallery">Abstract Painting</div></div>
    <div class="wrapper"><img src="art/graphite.jpg"/><div class"gallery">Graphite Drawing</div></div>
</div>

.wrapper {
    float: left;
}

jsfiddle

另外我认为你可以删除这些样式：

.gallery img {
    display:inline-block;
    float:left;
}

Answer 2

<div class"gallery">

你错过了'='

更正为：

<div class="gallery">

图片库/浮动问题

Image gallery / float issue

html

css

css-float