首页 文章

Figcaption可防止图像内嵌对齐

提问于
浏览 次
1

我正在构建一个包含3行和3列图像的导航框 . 我的目标是在每张图片下方添加一些文字 . 我今天遇到了'figcaption'，虽然它接缝像完美的标签，但我无法缝合以使其正确显示 .

The problem 图像正确显示'inline'，直到我添加'figcaption'标签 . 文本出现在块（我假设）中，在每个图像下方很好..但它也强制下一个图像到一个新行（即使内联块已应用于父容器''） .

我正在使用的html如下..

<section class="menu">
<h1>Menu</h1>



    <div>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>        
    </div>

        ***Div repeated twice***

</section>

这是css

.menu div {
    padding: 0;}
.menu li a{display: inline;}
.menu a img{
    width:32.1%; height:auto; 
    }

这是Fiddle

谢谢

css html5 inline

1 回答

  • 0

    根据MDN， <figcaption> 需要在 <figure> 标签内：

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

    这是一个更新的HTML结构：

    <section class="menu">
<h1>Menu</h1>

    
    <div>
        <figure>
            <a href="">
                <img src="http://placekitten.com/100/100">
            </a>
            <figcaption>Caption</figcaption>
        </figure>
        <figure>
            <a href="">
                <img src="http://placekitten.com/100/100">
            </a>
            <figcaption>Caption</figcaption>
        </figure>
        <figure>
            <a href="">
              <img src="http://placekitten.com/100/100">
            </a>  
            <figcaption>Caption</figcaption>      
         </figure>
    </div>
</section>

    和相关的CSS：

    .menu div {
    padding: 0;}
.menu figure {display: inline-block;
    width:100px;
}
.menu a img{
    height:auto; 
}

    http://jsfiddle.net/DHM46/5/

    回复于

相关问题