垂直向下展開圖像CSS填充空間

這很可能是重複的，但我一直沒能找到任何與相當的東西，相當於一樣。我想在圖像下方填充空格以阻止文本完全包裹。在視覺方面：垂直向下展開圖像CSS填充空間

我有這樣的：

 
| /---\ BLAHBLAH 
| |img| blah 
| \---/ blah 
| blah 
| blah 
| ...

我想這一點：

 
| /---\ BLAHBLAH 
| |img| blah 
| \---/ blah 
|  blah 
|  blah 
|  ...

我該怎麼辦？

來源

2013-01-22 astex

讓你的當前HTML成小提琴和張貼。 – mithunsatheesh

是的..請添加一些代碼片段來看看。塗鴉不會工作:) –

這是一個模板，但我會嘗試做一個通用的例子。 [這裏]（http://pastebin.com/4Cvd88Gf） – astex

你可以這樣寫：

<img src="bla.png" style="float:left;" /> 
<div style="overflow:hidden">Some text</div>

檢查http://jsfiddle.net/HhJML/

來源

2013-01-22 06:54:01 sandeep

如果父div具有text-align：left，則這不起作用。但是，它適用於我的目的（或單獨）。 – astex

您可能需要在這裏玩一些CSS屬性。例如，嘗試

display:inline-block;

爲圖像。或

float:right;

文本和

float:left;

的圖像或兩者。甚至可以嘗試填充底部圖像

更嚴格的方式來做到這將是使用一個表，並在相同的「TR」

來源

2013-01-22 05:55:17

表是那種總... – astex

同意毛的一部分，但他們的工作大部分時間;） –

浮動：權造成股利低於落下圖片。顯示：內聯塊沒有做任何事情。兩者都做同樣的浮動：正確。 – astex

我想添加圖片和文字兩種「TD」元素你應該設置IMG CSS的float向左和文字浮動的權利..這樣

<img src="bla.png" style="float:left;" /> 
<div style="float:right;"><p>Some text</p></div>

東西希望它能幫助:)

來源

2013-01-22 05:56:39 casper123

不幸的是，浮動：權只是將圖像下方的文本。 – astex

@astex：如果你把裏面的文字容器內聯顯示它不會把它的圖像 – casper123

float屬性添加到這兩個圖片和文字，圖像添加到一個div和調整到左側並設置div高度= 100％。我想這會工作

來源

2013-01-22 06:07:15

如果你的HTML是這樣的：

<div class="content-container"> 
    <p><img src="whatever" /> text text text text text 
    text text text text text text text text text text text 
    text text text text text text text text text text text 
    text text text text text text text text text text text 
    text text text </p> 
</div>

那麼有沒有辦法，只用CSS來做到這一點。添加一些jQuery的味道一樣：

// Loop through all the images 
$('.content-container img').each(function(){ 
    // Get image height 
    var imageHeight = $(this).height(); 
    // Get container's height 
    var containerHeight = $(this).parent('.content-container').height(); 
    // Set image bottom margin to container's height - image height 
    jQuery(this).css('margin-bottom', (containerHeight - imageHeight) + 'px'); 
})

來源

2013-01-22 06:08:26

這下面，可惜沒絕對沒有......「填充底」還沒有采取任何行動。 – astex

HTML：

<div class="content"> 
    <img src="thumbnail.jpg" width="50" height="50" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....</p> 
</div>

CSS：

.content { 
    padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */ 
    position: relative; /* So the thumbnail is relative to this */ 
} 

.content img { 
    left: 0; 
    position: absolute; 
    top: 0; 
}

CSS tip: Float an image without text wrapping under it

來源

2013-01-22 06:24:04

這會垂直縮放圖像，這不是所需的效果。 – astex

誤讀了問題，更新了答案。 –

如果您不介意使用表格，那麼您可以輕鬆解決您的問題。

像這樣：

<table> 
    <tr> 
     <td><img src="yourImage.jpg" alt="" /></td> 
     <td>Your text... blah blah blah..... blah</td> 
    </tr> 
</table>

您可以設置TD的寬度爲您的要求，使所有的TD具有相同的大小。

來源

2013-01-22 10:26:21 Facbed

正如我在上日劇Mahna的答案的評論說，（其中你是一個重複的），表是總... – astex

我沒有看到這一點。你也可以嘗試2格。把你的文字放在一個div上，另一個放在你的圖像上。並且將這兩個div都作爲行內塊，並且它們的總寬度應該等於主容器。或者您也可以使用圖像下邊距，而圖像應該左移。你可以試試這兩種技巧。 – Facbed

垂直向下展開圖像CSS填充空間

回答

相關問題