圖片下的文字包裝

儘管這是一個非常簡單的錯誤，但我無法解決它。請檢查以下鏈接。圖片下的文字包裝

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

下你會發現「事業編制」區域滑塊。它有一個圖像圖標和文字說明。我希望文字不會出現在圖像下方，並且它會在圖像位於圖像下方的位置後對齊。我也嘗試了填充，但可能是我無法將其應用於正確的節點。

請告訴我如何解決這個問題。

非常感謝。艾哈邁德

來源

2013-09-27 Omicans

請張貼適用於您的問題的HTML和CSS。或者在JSFiddle中重新創建它。 – LinkinTED

請讓你的建立div的架構這樣。

enter image description here

主establishment div一些固定的寬度。然後將establishment div分爲"left-establishment"和"right-establishment"兩個部分寬度：60％。希望這種方法能解決你的問題。

來源

2013-09-27 11:09:43 Sami

記得要把兩個div都留下來，然後在關閉主體div之前清除它 – Sami

由於您的代碼庫已經在使用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;">

來源

2013-09-27 11:22:57 SombreErmine

圖片下的文字包裝

回答

相關問題