Question

我有一个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>

Answer 1

你不能在另一个<{p>

<p></p>

Answer 2

HTML5：

<!DOCTYPE html>

...

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

Fiddle

这样吗？

Answer 3

只需从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>

带浮动的CSS图像标题文本

3 个答案: