代码之家 › 专栏 › 技术社区 › David Tunnell

如何防止文本在浮动图像增长时换行?

css-float css html

David Tunnell · 技术社区 · 10 年前

即使文本比图像长,我如何将文本与图像对齐?

enter image description here

文字“ 安慰和希望 “未与图像右侧文本的其余部分对齐。

<style>
    .left { float: left; margin: 0em .5em .5em 0; padding-top:5px; padding-left:5px; }
    .right { float: right; margin: 0 0 .5em .5em; }
    .text {margin-right: 15px; padding-bottom: 10px; padding-top:5px;}
    table, th, td {padding: 0px; border: 4px solid white; background-color:#e5e5e5; height:150px; width: 620px}
</style>

<td><a href="/grief-loss/"><img src="/uploads/2013/07/grief-loss.png" width="99" height="123" class="left"><div class="text"><b>Grief, Loss & End of Life Issues</b></a><br> The loss of a loved one can be life changing.  Grief is a difficult and continual journey in which additional support can provide comfort and hope.</div></td>
</tr>

我如何做到这一点?

2 回复 | 直到 10 年前

Community Dai 7 年前

您可以添加 overflow 值不同于的属性 visible 到 .text div元素,以防止内容包装浮动图像。

Example Here

.text {
    overflow-x: auto; /* or hidden; */
    /* overflow property would create a new block formatting context         */
    /* https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context */
}

或 float 这个 文本 元素以及图像 (作为 @MrAlien 建议) ,确保分配一些 width 至浮动元件。( Example here )

或者,您可以设置左侧 margin (>= 宽度 浮动图像的) 到 文本 元素:

.text {
  margin-right: 15px;
  padding-bottom: 10px;
  padding-top:5px;
  margin-left: 110px; /* <-- Added margin */
}

Updated example .

Matt Pileggi 10 年前

使用内联块而不是浮动

.img, .copy { display: inline-block; vertical-align: top; padding: 0 0.5em; max-width: 100px }

<div class="img">My Image</div>
<div class="copy">This is my long area of copy that is taller than the height of the image.</div>

http://jsfiddle.net/tCQ26/