Question

我已经创建了一个关于我的问题的演示，我正在努力解决这么简单的问题。我需要在div中的图像周围浮动文本。

<div style="float:left; width: 50%; box-sizing: border-box; padding: 10px 10px 10px 0px;">

    <div style="background-color: #f6f6f6; box-sizing: border-box; padding: 5px;">

        <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" height="300" style="padding: 0 10px 5px 0;"  />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat, urna eget convallis ullamcorper, felis ante viverra nunc, sed venenatis eros felis eu magna. Phasellus quis nisl et eros congue ornare. Proin aliquet commodo tincidunt. Morbi pharetra at libero id convallis. Aliquam erat volutpat. Vivamus eu pharetra nibh. Integer ultrices, ex vitae malesuada fringilla, odio arcu semper ante, nec interdum quam mi quis orci. Mauris gravida ut dolor quis bibendum. Vestibulum non cursus erat. Etiam convallis ex mattis, auctor velit sed, luctus leo. Nunc pharetra ligula dictum felis molestie porta. Vivamus volutpat odio id venenatis rutrum. Maecenas auctor turpis vel justo tristique, laoreet volutpat risus dictum.</p>

    </div>

</div>

Answer 1

可能会低于代码将帮助您。请改用此图片。

<img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" height="300" style="padding: 0 10px 5px 0; float:left;"  />

Answer 2

最近发现这样一块可以帮忙

shape

或添加img标记float:left;

element.style {
    float: left;/*add*/
    padding: 0 10px 5px 0;
}

Answer 3

将图像放在您希望它旁边浮动的div旁边，然后让它们向左浮动+宽度。例如：

<div>
    <img style="float: left; display: block; max-width: 50%;" />
    <div style="float: left; width: 50%;">
        Some Content
    </div>
</div>

请注意，我们在图片上使用max-width只是为了确保它适合可用空间，以便它漂浮在div旁边。

Answer 4

如果您不想对图像宽度做出妥协，请将第一个div的宽度增加到100％，并将float css属性与图像一起使用

<div style="float:left; width: 100%; box-sizing: border-box; padding: 10px 10px 10px 0px;">

        <div style="background-color: #f6f6f6; box-sizing: border-box; padding: 5px;">

            <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg"
            height="300" 
            style="padding: 0 10px 5px 0; float:right;"  />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat, urna eget convallis ullamcorper, felis ante viverra nunc, sed venenatis eros felis eu magna. Phasellus quis nisl et eros congue ornare. Proin aliquet commodo tincidunt. Morbi pharetra at libero id convallis. Aliquam erat volutpat. Vivamus eu pharetra nibh. Integer ultrices, ex vitae malesuada fringilla, odio arcu semper ante, nec interdum quam mi quis orci. Mauris gravida ut dolor quis bibendum. Vestibulum non cursus erat. Etiam convallis ex mattis, auctor velit sed, luctus leo. Nunc pharetra ligula dictum felis molestie porta. Vivamus volutpat odio id venenatis rutrum. Maecenas auctor turpis vel justo tristique, laoreet volutpat risus dictum.

        </div>        
 </div>

如何在图像周围浮动文本

4 个答案: