Html 垂直向下展开图像以填充空间

这很可能是重复的，但我还没有找到完全相同的。我希望在图像下方填充一个向下的空间，以阻止文本完全换行。在视觉方面：

我有这个：

| /---\ BLAHBLAH | |img| blah | \---/ blah | blah | blah | ... |/--\BLAHBLAH || img |诸如此类 |\--/诸如此类 |废话 |废话 | ... 我想要这个：

| /---\ BLAHBLAH | |img| blah | \---/ blah | blah | blah | ... |/--\BLAHBLAH || img |诸如此类 |\--/诸如此类 |废话 |废话 | ...

---

我该怎么办？

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

display:inline-block; 

为了形象。或

float:right;

对于文本和

float:left;

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

---

更严格的方法是使用一个表，在同一个“tr”中添加两个“td”元素中的图像和文本。您可能需要在这里使用一些CSS属性。例如，试试看

display:inline-block; 

为了形象。或

float:right;

对于文本和

float:left;

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

---

一种更严格的方法是使用一个表，在同一个“tr”中添加两个“td”元素中的图像和文本。

我想您应该将img css float设置为left，将text设置为right。。像这样的

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

一些文本

---

希望有帮助：）

我想你应该将img css float设置为左侧，将text设置为右侧。。像这样的

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

一些文本

---

希望有帮助：）

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

将Float属性添加到图像和文本中，将图像添加到div中并向左对齐，并将div高度设置为100%。！如果您的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>

如果您的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>

HTML:

HTML：

---

你可以这样写：

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

一些文本

---

选中此项

您可以这样写：

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

一些文本

---

检查此项

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

像这样：

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

你的文字。。。诸如此类。。。。。废话

---

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

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

像这样：

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

你的文字。。。诸如此类。。。。。废话

---

---

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

将当前html制作成小提琴并发布。是的。。请添加一些代码片段以查看。涂鸦不起作用：）这是一个模板，但我会尝试做一个一般的例子。把你现在的html变成小提琴，然后把它贴出来。。请添加一些代码片段以查看。涂鸦不起作用：）这是一个模板，但我会尝试做一个一般的例子。浮动：右侧导致div下降到图像下方。显示：内联块未执行任何操作。这两种方法的效果与float:right相同。那么为什么不换一个漂亮的小表格呢：）float:right导致div下降到图像下面。显示：内联块未执行任何操作。这两种方法的效果与float:right相同。那么为什么不换一个漂亮的小表格：）不幸的是，float:right只是将文本放在图像下方。@astex:如果将文本放在具有内联显示的容器中，它不会将文本放在图像下方不幸的是，float:right只是将文本放在图像下方。@astex:如果将文本放在具有内联显示的容器中，它不会将其放在图像下方。不幸的是，它没有做任何事情…“padding-bottom”也没有做任何事。不幸的是，它没有做任何事情…“padding-bottom”也没有做任何事情。这会垂直缩放图像，这不是期望的效果。这会垂直缩放图像，这不是期望的效果。正如我在Riju Mahna的答案（你的答案是重复的）的评论中所说的，表格很粗糙……我没有看到这一点。您也可以尝试2个div。将文本放在一个div上，另一个div放在图像上。并使div作为内联块，其总宽度应等于主容器。或者，当图像应该在左侧浮动时，也可以使用图像的下边距。你可以试试这两个技巧。正如我在对Riju Mahna的答案（你的答案是重复的）的评论中所说的，表格太恶心了……我没有看到这一点。您也可以尝试2个div。将文本放在一个div上，另一个div放在图像上。并使div作为内联块，其总宽度应等于主容器。或者，当图像应该在左侧浮动时，也可以使用图像的下边距。您可以尝试这两个技巧。如果父div具有text align:left，则这不起作用。但是，就我的目的而言（或者就其本身而言），它工作得足够好。如果父div具有text align:left，则这不起作用。但是，就我的目的而言，它已经足够好了（或者就其本身而言）。