虽然这是一个非常简单的错误,但我无法解决它。请检查以下链接。
http://inimitablesystems.com/demos/interactin/interactin
在滑块下,您会找到“BUSINESS ESTABLISHMENT”区域。它有一个图像图标和文字说明。我希望文本不会出现在图像下方,并且在图像下方显示对齐,因为它在图像下方。我也试过了填充,但可能是我无法在正确的节点上应用它。
请告诉我如何解决问题。
非常感谢你。 艾哈迈德
答案 0 :(得分:0)
请像这样建立你的建筑div的架构。
主establishment div
,宽度固定。然后将establishment div
划分为两个部分"left-establishment"
和"right-establishment"
宽度:60%。希望这种方法能解决你的问题。
答案 1 :(得分: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
,如果您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;">