0

簡単な例があります：

<html>
<head>
    <style type="text/css">
        img {
            float: left;
            padding-left: 50px;
        }
        blockquote {
            background-color: #FF0;
        } 
    </style>
</head>
<body>
    <div>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/200px-HTML.svg.png" />
        <p>
            paragraph
        </p>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
        <blockquote>
            <p>
                blockquoted paragraph 
            </p>
        </blockquote>
    </div>
</body>
</html>

したがって、ページの外観は次のとおりです。

画像のあるページ

画像のない同じページ：

画像のないページ

2番目の例のテキストの配置と左に浮かぶ画像の組み合わせを取得する必要があります（配置の線は赤でマークされています）。

理想的なページ

4

4 に答える 4

2

画像と他のセクションの両方に左フロートdivを追加します。

<html><head>
<style type="text/css">
    img {
        float: left;
        padding-left: 50px;
    }
    blockquote {
        background-color: #FF0;
    } 
div {
float: left;
}
</style>
</head>
<body>
<div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/200px-HTML.svg.png"></div><div>
    <p>
        paragraph
    </p>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
    <blockquote>
        <p>
            blockquoted paragraph 
        </p>
    </blockquote>
</div>

</body></html>
于 2012-04-18T06:34:21.813 に答える
2

次のように display:inline を使用できます

<div>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/200px-HTML.svg.png" />

     <div style="display:inline-block;">
     <p>
            paragraph
        </p>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
        <blockquote>
            <p>
                blockquoted paragraph 
            </p>


        </blockquote>
</div>    
</div>​
于 2012-04-18T06:35:39.647 に答える
0

DIVテキストに新しいwithを追加float:leftします。JSFiddleのデモをご覧ください。

于 2012-04-18T06:32:07.013 に答える
0

margin-right: 50px;imgスタイルに追加するだけです...

于 2012-04-18T07:36:04.983 に答える