0

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

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

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

请告诉我如何解决这个问题。

非常感谢。艾哈迈德

4

2 回答 2

0

请像这样制作您的机构 div 架构。

在此处输入图像描述

establishment div具有一些固定宽度的主干。然后将其establishment div分成两部分"left-establishment"，"right-establishment"宽度：60%。希望这种方法能解决您的问题。

于 2013-09-27T11:09:43.887 回答
0

由于您的代码库已经在使用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了，一般来说，如果您遵循特定规则，大多数情况下是不必要的。）

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


于 2013-09-27T11:22:57.120 回答