3

画像は互いの下に正しく配置されますが、テキストは最初の画像の横にのみ表示されます。

最初の h2 と p を最初の画像の隣に表示し、2 番目の h2 と p を 2 番目の画像の隣に表示します。

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

3 に答える 3

0 
   <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;
}
于 2013-06-18T20:39:09.043 に答える
0

各画像の後に使用<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>
于 2013-06-18T19:59:49.103 に答える