Question

编辑：如果文本足够短，文本被强制换行，那么它的行为与我期望的一样。问题是文本太长了。编辑如下以反映这一点。请看这个小提琴：https://jsfiddle.net/ew1f2asv/1/

我有以下结构

<div class="display_inlineblock"><img src="image.png"></div>
<div class="display_inlineblock">Hello, this is a really long sentence that causes a line break</div>

CSS：

.display_inlineblock{
  display:inline-block; //inline or inline-block, doesn't matter
}

我的期望是结构看起来像：

 -----------  ----------------
| image.png | |  Hello, this  |
 -----------  |  is a really  |
              |  long sentence|
              |  that causes  |
              |  a line break |
              -----------------

右边的div会垂直增长，因为它填满了更多文字，但与左边的线保持一致。

然而，正在发生的事情是

 ----------- 
| image.png |
 -----------
----------------
|  Hello, this  |  
|  is a really  |                
|  long sentence|
|  that causes  |
|  a line break |
-----------------

任何人都知道为什么？有没有办法实现第一个结果？

谢谢！

Answer 1

为此，您需要将float: left与display: inline一起使用。为了清除这些概念，带有display: block的元素将自然扩展以填充其父容器; display: inline元素会忽略width和height属性。但是，只有具有inline属性的float元素将自动成为块级元素并包含其兄弟元素的后续内容。

<div class="image-wrap"><img src="image.png"></div>
<div class="text-wrap">Hello</div>

使用CSS：

.image-wrap,
.text-wrap {
  display: inline;
  float:left;
}

或者您可能希望使用<span>，默认情况下为inline。

Answer 2

尽量不要为图片代码和存储文字的div使用相同的css属性，因为文本div需要以不同方式定位。
为文本div使用不同的类
将您的图片代码和文字div放在主div中并应用position:relative;

这是一个片段，我将如何用css overflow:hidden的力量做到这一点！

#main{
  position:relative;
}
.display_inlineblock{
  float:left;
  display:block; //inline or inline-block, doesn't matter
  
}
.display_inlineblock_text{
overflow:hidden;

}

<div id="main">
<div class="display_inlineblock"><img src="image.png"></div>
<div class="display_inlineblock_text">Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. </div>
</div>

Answer 3

只需使用table-cell。

像：

.wrapper {
  display:table;  
}

.display_inlineblock {
  display:table-cell;  
}

<div class="wrapper">
  <div class="display_inlineblock"><img src="image.png"></div>
  <div class="display_inlineblock">Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. </div>
</div>

内联块div开始一个新行

3 个答案: