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;
}

HTML5和CSS3：對齊圖像旁邊的文本

問題描述

3 個解決方案

解決方案1
2 已采納 2013-06-18 19:47:43

解決方案2
0 2013-06-18 19:59:49

解決方案3
0 2013-06-18 20:39:09

HTML5和CSS3：對齊圖像旁邊的文本

問題描述

3 個解決方案

解決方案1 2 已采納 2013-06-18 19:47:43

解決方案2 0 2013-06-18 19:59:49

解決方案3 0 2013-06-18 20:39:09

解決方案1
2 已采納 2013-06-18 19:47:43

解決方案2
0 2013-06-18 19:59:49

解決方案3
0 2013-06-18 20:39:09