HTML5和CSS3：对齐图像旁边的文本

Question

图像彼此正确对齐，但文本仅出现在第一张图像旁边。

我希望第一个h2和p出现在第一个图像旁边，第二个h2和p出现在第二个图像旁边。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Yoko Lounge</title>
        <meta name="author" content="Yoko"/>
        <link href="styles.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>Yoko Lounge</h1>
            </div>
            <div id="nav">
                <ul>
                    <li class="current">Home</li>
                    <li>Forum</li>
                    <li>Members</li>
                    <li>Calendar</li>
                    <li>Logout</li>
                </ul>
            </div>
            <div id="figs">
                <img class="figure" src="bok-choi.jpg" alt="bok"/>
                <h2>Best Plant</h2>
                <p>This plant gives you health.</p>
                <img class="figure" src="teriyaki.jpg" alt="teriyaki"/>
                <h2>Teriyaki Health Plant</h2>
                <p>This plant gives you health.</p>
            </div>
        </div>
    </body>
</html>

CSS：

body {
    background: url("dark-wood.jpg");
    margin: 0px;
}

#wrapper {
    width: 920px;
    margin: 20px auto;
    border: 2px solid black;
}

#header {
    height: 130px;
    background: url("header.jpg");
}

h1 {
    text-indent: -9999px;
    margin: 0px;
}

#nav {
    background: #AEACA8;
    color: #FFFFFF;
    height: 30px;
}

#nav ul {
    margin: 0px;
    padding: 5px 0px 5px 30px;
}

#nav li {
    display: inline;
    margin-right: 40px;
}

#nav ul li.current, #nav ul li:hover {
    color: black;
}

#content {
    background: #FFFFFF;
    color: black;
    width: 100%;
}

#figs {
    background: #FFFFFF;
    color: black;
    float: left;
    width: 70%;
}

img.figure {
    display: block;
    border: 1px solid black;
    margin: 20px 20px;
    float: left;
}

Answer 1

您应该在第二个图像之前添加<div style="clear: both"></div> 。 这将强制下一个项目在左边浮动的前3个项目下流动。

Answer 2

在每个图像之后使用<div style="clear:left"></div>以防止浮动效果传播到你的h2和p元素，如下所示：

         <div id="figs">
            <img class="figure" src="bok-choi.jpg" alt="bok"/>

            <div style="clear:left"></div> <!-- add this to stop float effect due to 1st image -->

            <h2>Best Plant</h2> 
            <p>This plant gives you health.</p>
            <img class="figure" src="teriyaki.jpg" alt="teriyaki"/>

            <div style="clear:left"></div> <!-- add this to stop float effect due to 2d image -->


            <h2>Teriyaki Health Plant</h2>
            <p>This plant gives you health.</p>
        </div>

Answer 3

   <div id="figs">
        <img class="figure" src="bok-choi.jpg" alt="bok"/>
        <h2>Best Plant</h2>
        <p>This plant gives you health.</p>
        <div class="clear"></div> <!-- add clear class -->
        <img class="figure" src="teriyaki.jpg" alt="teriyaki"/>
        <h2>Teriyaki Health Plant</h2>
        <p>This plant gives you health.</p>
    </div>

------- CSS -------

.clear {
clear:both;
}