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>

因此，页面的外观是：

The page with the image

没有图片的同一页面：

The page without the image

我必须得到第二个例子的文本对齐和浮动到左边的图像的组合（对齐线标记为红色）：

An ideal page

Answer 1

将左浮动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>

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

Answer 3

为文字添加DIV float:left个{{1}}。请参阅demo here on JSFiddle。

Answer 4

我只想将margin-right: 50px;添加到img样式...

具有浮动图像的段落，列表，块引用

4 个答案: