如何在 div 周围环绕文本？答案

【问题标题】：How to wrap text around a div?如何在 div 周围环绕文本？
【发布时间】：2012-11-08 19:58:32
【问题描述】：

我的硬币滑块周围有一个容器 div。我想在这个容器 div 周围环绕文本。如何实现这一目标？

现在我的 HTML 是这样设置的：

<p> <!-- LOTS OF TEXT --> </p>
<div id="mycontainer"> <!-- coinslider inside --></div>

我的 CSS 设置如下：

#mycontainer {
position: relative;
float: right;
width: 500;
height: 334;
}

【问题讨论】：

标签： html css

【解决方案1】：

<div>
    <div  style="float:left; width: 150px; height: 150px; margin: 10px; background-color: #ff0000;">
        <!--your image or text--> 
    </div>
    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
</div>

【讨论】：

【解决方案2】：

将你的 div 包裹在另一个 div 中，并为其赋予 float 属性...

<div id="main">
    <div id="mycontainer"> <!-- coinslider inside --></div>
</div>
<p> <!-- LOTS OF TEXT --> </p>

#main
{
    float:right;
}
#mycontainer 
{
    width: 500px;
    height: 334px;
    background-color:  gold;
}

Check Fiddle

或

P 应该在 Div 之后

   <div id="mycontainer"> <!-- coinslider inside --></div>

    <p> <!-- LOTS OF TEXT --> </p>

#mycontainer 
{
    float:right;
    width: 500px;
    height: 334px;
    background-color:  gold;
}

Fiddle

【讨论】：

它在小提琴右边工作..你把p标签放在div标签之后
我重新排列了它，使
在

之后，唯一发生的事情是文本现在出现在硬币滑块下方。文本不会环绕此 div。
如果是这种情况，您的其他 HTML 可能会影响其位置.. 除非我们知道 HTMl 结构，否则很难说出到底发生了什么
嗯谢谢你的尝试。我想我会一起更改布局，直到我有时间解决这个问题。

【解决方案3】：

将此添加到您的 CSS 中，您应该会很好：

display: block;

【讨论】：

hmmm... 尝试将整个内容放在另一个 div 中？
那么可能是position: relative; 语句。请参阅 stackoverflow 中的this other example。
我也尝试删除它。嗯谢谢你的尝试。我想我会一起更改布局，直到我有时间解决这个问题。

【解决方案4】：

<div id="mycontainer"> <!-- coinslider inside --><p> <!-- LOTS OF TEXT --> </p></div>

您的文本需要进入 div 容器。希望有效。

【讨论】：