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>

所以，页面的外观是：

有图片的页面

没有图像的同一页面：

没有图片的页面

我必须将第二个示例中的文本对齐方式和浮动到左侧的图像组合起来（对齐线标记为红色）：

理想的页面

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