垂直向下展开图像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填充空间

回答

相关问题