0

我有一个 CSS 问题。我希望图像下的段落成为图像标题。所以它应该在图像下方。我解释得对吗？我究竟做错了什么？（您可以将代码复制到此处，然后在浏览器中观看）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>

        <style type="text/css">

        .CaptionRight
    {
        float: right;
        vertical-align: top;
        margin-left: 1em;
        margin-bottom: 1em;
        display:block;
        border: 1px red solid;
    }

    .CaptionRight p
    {

        }

    body
    {
        width: 500px;
        }
        </style>

    </head>
    <body>
    <p><span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" />
        <p>
        -This should be the image caption right under the image.   
        </p></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc lobortis at lacus in auctor. Phasellus urna ligula,
 accumsan ut nisl pharetra, porta egestas ligula.
 Integer ultrices dolor neque, dapibus cursus lorem
 volutpat sit amet. Aliquam volutpat tempus dapibus. 
Vestibulum blandit, quam sit amet lacinia laoreet, 
dui massa dictum turpis, sed mattis purus lorem non diam.
 Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu.
 Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit.
 Donec iaculis lorem elementum orci tempus rutrum.
 Donec vel tortor iaculis lacus lacinia tempus sed vel est. 
Suspendisse iaculis vestibulum tincidunt. Quisque varius 
sapien porttitor malesuada volutpat. Sed a sapien nisl.

        </p>



    </body>
    </html>
4

3 回答 3

2

你不能<p></p>在另一个里面有标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

    <style type="text/css">

 .CaptionRight{
    float: right;
    vertical-align: top;
    margin-left: 1em;
    margin-bottom: 1em;
    display:block;
    border: 1px red solid;
}


Body{
    width: 500px;
 }
    </style>

</head>
<body>
<span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" /><p>-This should be the image caption right under the image.</p></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis at lacus in auctor. Phasellus urna ligula, accumsan ut nisl pharetra, porta egestas ligula. Integer ultrices dolor neque, dapibus cursus lorem volutpat sit amet. Aliquam volutpat tempus dapibus. Vestibulum blandit, quam sit amet lacinia laoreet, dui massa dictum turpis, sed mattis purus lorem non diam. Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu. Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit. Donec iaculis lorem elementum orci tempus rutrum. Donec vel tortor iaculis lacus lacinia tempus sed vel est. Suspendisse iaculis vestibulum tincidunt. Quisque varius sapien porttitor malesuada volutpat. Sed a sapien nisl.
Etiam ultricies tincidunt sagittis. Cras tortor turpis, blandit eu tincidunt eu, malesuada sit amet nisl. In ullamcorper tellus est, et volutpat dui pretium id. Nullam a dolor orci. Vivamus volutpat nisl vel eros feugiat, sit amet elementum est eleifend. Phasellus lorem sem, adipiscing eu lacus consequat, hendrerit feugiat risus. Donec non adipiscing felis. Suspendisse potenti. Mauris tempus id magna at euismod. Quisque non justo eu nulla consequat feugiat sed vel diam. Nulla nec tortor rhoncus, tincidunt elit et, sagittis libero. Phasellus sed nibh et arcu elementum lacinia sit amet nec dolor. Phasellus dictum pulvinar erat vel auctor. Fusce nibh massa, molestie et elit fermentum, fringilla aliquam tellus. Donec pulvinar auctor risus, id auctor nisi pellentesque pellentesque.
Ut ut auctor metus. Curabitur sit amet dictum nunc. Aliquam dignissim erat ac nisl pellentesque, at pellentesque nisi auctor. Ut dapibus iaculis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas hendrerit ipsum ut dolor commodo feugiat. Praesent eu purus eu ipsum pharetra commodo at at odio. Maecenas elementum urna vitae congue scelerisque. Donec vel laoreet lectus, ut laoreet odio. Nam ut accumsan quam, adipiscing tincidunt libero. Aenean quis felis libero.<br /></p>

</body>
</html>
于 2013-09-11T09:18:30.580 回答
1

HTML5：

<!DOCTYPE html>

...

<figure>
   <img src="#" alt="image">
   <figcaption>My caption</figcaption>
</figure>

小提琴

这样？

于 2013-09-11T09:16:13.443 回答
1

只需从 HTML 中删除 P 即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>

        <style type="text/css">

        .CaptionRight
    {
        float: right;
        vertical-align: top;
        margin-left: 1em;
        margin-bottom: 1em;
        display:block;
        border: 1px red solid;
    }

    body
    {
        width: 500px;
        }
        </style>

    </head>
    <body>
    <p><span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" />This should be the image caption right under the image.</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc lobortis at lacus in auctor. Phasellus urna ligula,
 accumsan ut nisl pharetra, porta egestas ligula.
 Integer ultrices dolor neque, dapibus cursus lorem
 volutpat sit amet. Aliquam volutpat tempus dapibus. 
Vestibulum blandit, quam sit amet lacinia laoreet, 
dui massa dictum turpis, sed mattis purus lorem non diam.
 Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu.
 Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit.
 Donec iaculis lorem elementum orci tempus rutrum.
 Donec vel tortor iaculis lacus lacinia tempus sed vel est. 
Suspendisse iaculis vestibulum tincidunt. Quisque varius 
sapien porttitor malesuada volutpat. Sed a sapien nisl.

        </p>



    </body>
    </html>
于 2013-09-11T09:20:16.413 回答