Question

我有一个简单的例子:

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

因此,上页是:

“带有图像的网页”</p

同一页没有图像:

“没有图像的网页”</p

我必须结合文字调整,从第二个例子和向左边的图像(接线标示为红色):

“一个理想的页面”/

Answer 1

你们可以使用显示器:一线照相。

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

Answer 2

Add left floated div to both image and other section.

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

Answer 3

添加新的<代码>DIV,float:left。 See demo here on JSFiddle。

Answer 4

I would just add margin-right: 50px; to the img style...

友情链接