Question

这很可能是重复的，但我找不到任何相当相同的东西。我想在图像下方填充一个空格，以阻止文本完全包裹。在视觉方面：

我有这个：

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

我想要这个：

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

我该怎么办？

Answer 1

你可以这样写：

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

选中此http://jsfiddle.net/HhJML/

Answer 2

您可能需要在此处使用一些CSS属性。例如，尝试

display:inline-block;

表示图像。或者

float:right;

表示文字和

float:left;

图像或两者，。甚至可以为图像尝试填充底部

更严格的方法是使用表格并在同一'tr'中的两个'td'元素中添加图像和文本

Answer 3

我猜你应该将img css float设置为left，将text设置为float ..这样的事情

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

希望有所帮助：）

Answer 4

将Float属性添加到图像和文本中，将图像添加到div中并对齐左侧并设置div height = 100％。我想它会起作用

Answer 5

如果您的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');
})

Answer 6

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

Answer 7

如果您不介意使用表格，那么您可以轻松解决问题。

像这样：

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

您可以根据需要设置td的宽度，以使所有td具有相同的大小。

垂直向下扩展图像CSS以填充空间

7 个答案: