用文本填充的div之間複雜的垂直間距

我想通過操縱文本週圍的圖片來增加創意，並且我一直只使用HTML（至於CSS左側或右側）以「風格「的文章莫名其妙;用文本填充的div之間複雜的垂直間距

<div> 
<div style="float:left;padding-right:10px;">image1.jpg</div> 
<div style="float:left;padding-right:10px;">image2.jpg</div> 
'.$article['text'].' 
</div>

這裏是結果：

enter image description here

工作正常，但..你可以看到，有圖像之間沒有垂直間距，以便物品可以看起來更加漂亮理解到讀者。

我試圖找到HTML來控制圖像之間的垂直間距（divs實際上 - 以某種方式使文本可以填充圖像之間的垂直間距），但沒有骰子。

無論如何，任何想法如何控制這種間距？我想實現的是對文章看起來像這樣：

enter image description here

請注意，文章是由PHP（不是通過所見即所得的編輯器）動態創建的，所以我需要一些這方面的「自動」功能。謝謝！

ps：if HTML & CSS對此無能爲力，任何PHP或Jquery函數也是值得歡迎的。謝謝！

來源

2013-07-31 Xfile

你試過類似的東西嗎？

<div> 
    <img src="image1.jpg" style="float:left; padding-right:10px;"> 

    FIRST PART OF TEXT 

    <div style="clear: both;"></div> 

    <img src="image2.jpg" style="float:left; padding-right:10px;"> 

    SECOND PART OF TEXT 

</div>

你真的無法控制的間距反正，但如果第一個文本是足夠長的時間，它就會進入兩個圖像之間的差距。

這裏有一個小提琴：http://jsfiddle.net/NVyLX/1/

來源

2013-07-31 10:58:02 MightyPork

Thx MightyPork，當然這樣做，但我不能手動控制HTML來做到這一點，例如通過WYSIWYG編輯器。 PHP自己完成它（在我的情況下）。我只需要一些代碼，Jquery或PHP函數的插件來完成這件事，或者其他的東西。一些「文本分割」功能可能會給你一個幫助...... – Xfile

如果你可以從PHP輸出文本，那麼你完全控制了頁面，這沒有任何意義。例如，您還可以將css樣式添加到圖像中，img {clear：both;} – MightyPork

您只需要這樣做：1.輸入（純文本）文本，2.瀏覽圖像並通過輸入文件表單被停放，調整大小並由PHP單獨輸入文章。通過WYSIWYG編輯器創建這個過程非常緩慢，對於許多記者和作者來說非常複雜，所以我編程的網站自動創建文章（＆佈局）。 – Xfile

如果拆分文本到單獨段落，那麼你就可以在它們之間浮動圖像。所以，你的代碼將不得不沿着這些線路更多：

<div> 
    <div style="float:left;padding-right:10px;">image1.jpg</div> 
    <p>Article part one...</p> 
    <p>Article part two...</p> 
    <div style="float:left;padding-right:10px;">image2.jpg</div> 
    <p>Article part three...</p> 
    <p>Article part four...</p> 
</div>

如果你的部分是足夠長的時間，他們將填寫的空白。否則，圖像將保持一個在另一個之下。

如果你真的想要休息一下，那麼你可以使用<div style="clear: both;"></div>作爲@MightyPork的例子，但是如果你沒有足夠的文本，你將會在段落之間產生巨大的中斷和連續性。

來源

2013-07-31 11:00:09 ZorleQ

你的意思是什麼「巨大的空間」？如果文本足夠長，就完全沒有問題，這就是他在OP中顯示的內容。 – MightyPork

當然，這取決於段落的長度。純粹基於情況。 – ZorleQ

用文本填充的div之間複雜的垂直間距

回答

相關問題