1

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

我有这个：

| /---\ 废话
| |图片| 废话
| \---/废话
| 废话
| 废话
| ...

我要这个：

| /---\ 废话
| |图片| 废话
| \---/废话
| 废话
| 废话
| ...

我该怎么办？

4

7 回答 7

1

你可以这样写：

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

检查这个http://jsfiddle.net/HhJML/

于 2013-01-22T06:54:01.497 回答
0

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

display:inline-block;

为图像。或者

float:right;

对于文本和

float:left;

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

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

于 2013-01-22T05:55:17.007 回答
0

我想你应该设置 img css 向左浮动和文本向右浮动.. 像这样的东西

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

希望能帮助到你 ：）

于 2013-01-22T05:56:39.660 回答
0

将 Float 属性添加到图像和文本，将图像添加到 div 中并左对齐并设置 div 高度 = 100%。！我想它会起作用的

于 2013-01-22T06:07:15.087 回答
0

如果你的 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-22T06:08:26.543 回答
0

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 提示：浮动一个没有文字环绕的图像

于 2013-01-22T06:24:04.227 回答
0

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

像这样：

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

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

于 2013-01-22T10:26:21.933 回答