Question

我的网站上有一个画廊，但是当我添加figcaption时，一切都出错了，每张照片都变成了中心。我做错了什么？我真的无法想象如何改进它。

  #image{
position: inherit;
width:300px;

-webkit-transition:all 1s;
transition:all 1s;
margin-top:10px; 

}

#image:hover{
position: inherit;
-webkit-transform:scale(3);
transform:scale(3);
margin: 0 auto; 
highslide: auto;
}

figure.img img {  
max-width: 300px;
height: auto;

}
figure.img figcaption {  
padding: 5px;
font: bold italic 90% Georgia,serif;
color: #17432e;
width: 300px;
margin-left: 0px;
}
.pictures {

margin: 100px auto;
width: 980px;
}
.clear {
clear: both;
}

然后在身体中我根据你的建议进行了所有的改变

<div align="center">
    <figure class="img">

            <img id="image" src="pics/1.jpg" class="passe-partout">
            <figcaption>In the village</figcaption>
    </figure>
    <figure class="img">
            <img id="image" src="pics/2.jpg" class="passe-partout">
            <figcaption>August</figcaption>
    </figure>
    <figure class="img">
            <img id="image" src="pics/3.jpg" class="passe-partout">
            <figcaption>The bridge</figcaption>
    </figure>
    <figure class="img">
           <img id="image" src="pics/4.jpg" class="passe-partout">
            <figcaption>A cute house</figcaption>
    </figure>

    <div class="clear"></div>
    </div>

Answer 1

我通过删除多个相同的ID来使代码更有效并用图形元素包装每个img / figcaption对。要在同一行显示数字，显示：inline-block已添加到图元素

<强> CSS

div.img img {
    width: 300px;
    max-width: 300px;
    height: auto;
    position: inherit;
    -webkit-transition: all 1s;
    transition: all 1s;
    margin-top: 10px;
}

    div.img img:hover {
        position: inherit;
        -webkit-transform: scale(3);
        transform: scale(3);
        margin: 0 auto;
        highslide: auto;
    }

div.img figcaption {
    padding: 5px;
    font: bold italic 90% Georgia,serif;
    color: #17432e;
    width: 300px;
    margin-left: 0px;
}

div.img figure {
    display: inline-block;
}

<强> HTML

<div class="img">
    <div align=center class="pictures">
        <figure>
            <img src="pics/1.jpg" class="passe-partout">
            <figcaption>In the village</figcaption>
        </figure>
        <figure>
            <img src="pics/2.jpg" class="passe-partout">
            <figcaption>August</figcaption>
        </figure>
        <figure>
            <img src="pics/3.jpg" class="passe-partout">
            <figcaption>The bridge</figcaption>
        </figure>
        <figure>
            <img src="pics/4.jpg" class="passe-partout">
            <figcaption>A cute house</figcaption>
        </figure>
        <div class="clear"></div>
    </div>
</div>

Answer 2

这是工作解决方案。

--- CSS代码 -

figure img{
position: inherit;
width:300px;
-webkit-transition:all 1s;
transition:all 1s;
margin-top:10px; 
}

figure img:hover{
position: inherit;
-webkit-transform:scale(3);
transform:scale(3);
margin: 0 auto; 
highslide: auto;
}

figure> figcaption {  
padding: 5px;
font: bold italic 90% Georgia,serif;
color: #17432e;
width: 300px;
margin-left: 0px;
}

/ ---- HTML Code ----- /

<div align=center class="pictures">
  <figure class="img">
    <img id="image" src="http://lorempixel.com/200/200" class="passe-partout">
            <figcaption>In the village</figcaption>

  </figure>
          <figure class="img">
            <img id="image" src="http://lorempixel.com/200/200" class="passe-partout">
            <figcaption>In the village</figcaption>

  </figure>
  <figure class="img">
            <img id="image" src="http://lorempixel.com/200/200" class="passe-partout">
            <figcaption>In the village</figcaption>

  </figure>

</div>

这是一个工作演示。 http://jsbin.com/musovipo/1/

当我添加figcaption时为什么我的所有样式都出错了？

2 个答案: