图像下的文字环绕

Question

虽然这是一个非常简单的错误，但我无法解决它。请检查以下链接。

http://inimitablesystems.com/demos/interactin/interactin

在滑块下，您会找到“BUSINESS ESTABLISHMENT”区域。它有一个图像图标和文字说明。我希望文本不会出现在图像下方，并且在图像下方显示对齐，因为它在图像下方。我也试过了填充，但可能是我无法在正确的节点上应用它。

请告诉我如何解决问题。

非常感谢你。 艾哈迈德

Answer 1

请像这样建立你的建筑div的架构。

主establishment div，宽度固定。然后将establishment div划分为两个部分"left-establishment"和"right-establishment"宽度：60％。希望这种方法能解决你的问题。

Answer 2

由于您的代码库已经使用style属性（我建议不要使用它！），我将使用它们提供代码示例。

---

@Sami的方法是最理想的解决方案，因为没有设置混乱的width值，不用担心容器元素宽度的变化，也不用担心文本的添加或减少。

但是，如果您正在寻找快速修复而无需重新构建代码，即使我真的推荐@Sami的方法，我也有一对你。我真的只发​​布这个，因为在@Sami发布回复之前我已经遇到了输入它的麻烦。

---

一种可能的解决方案是明确指定包含文本的元素的宽度，然后将其浮动到已经浮动的图像旁边。

这里的问题是明确指定宽度以及浮动它是相当混乱，难以维护（使用内联样式很难维护），并导致更多潜在问题。

<p style="text-align: left; width: 375px;">
    <em style="font-style:normal; display:block; width:273px; float:left;">INTERACTin was established 2 years ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of 40-50 staff. Offers 3 occupation types.<br> Operates across various Industries.</em>
</p>

---

另一种可能的解决方案是在图像下方添加填充，使其框向下延伸到足以覆盖文本。

如果更改包含元素的宽度或添加更多文本，则此方法必然会失败。同样，这使得难以维护。

（我必须在代码示例中使用!important，因为您的网站已经使用!important，如果您follow rules of specificity，一般来说，这通常是不必要的。）

<img src="http://inimitablesystems.com/demos/interactin/assets/assets/img/events-icon.png" class="pull-left" style="padding-bottom:60px!important;">