Html Inline block div开始一个新行

编辑：如果文本在强制换行的位置足够短，则其行为与我预期的一样。问题是文本太长。下面编辑以反映这一点。请看这把小提琴：

我有以下结构

<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>

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

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

当右div填充更多文本时，它将垂直增长，但与左div保持在同一行上

然而，正在发生的是

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

有人知道为什么吗？有没有办法达到第一个结果

---

谢谢

要做到这一点，您需要将

float:left

与

display:inline

一起使用。 为了明确概念，带有

display:block

的元素将自然展开以填充其父容器；具有

display:inline

的元素将忽略

width

和

height

属性。但是，只有当具有

float

属性的

inline

元素将自动成为块级元素，并包含其兄弟元素的后面部分时

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

---

或者您可能希望使用默认为内联的

，

要做到这一点，您需要将
浮点：左
与
显示：内联
一起使用。
为了明确概念，带有
display:block
的元素将自然展开以填充其父容器；具有
display:inline
的元素将忽略
width
和
height
属性。但是，只有当具有
float
属性的
inline
元素将自动成为块级元素，并包含其兄弟元素的后面部分时

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

或者您可能希望使用默认为内联的

尽量不要对图像标记和存储文本的div使用相同的css属性，因为文本div的位置需要不同
为文本div使用不同的类
将图像标签和文本div放在主div中，并应用
位置：相对

下面是一个片段，我将如何使用css的强大功能来实现这一点
溢出：隐藏


#主{
位置：相对位置；
}
.display_inlineblock{
浮动：左；
display:block；//内联或内联块，无所谓
}
.显示\u内联块\u文本{
溢出：隐藏；
}

您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。

尽量不要对图像标记和存储文本的div使用相同的css属性，因为文本div的位置需要不同
为文本div使用不同的类
将图像标签和文本div放在主div中，并应用
位置：相对

下面是一个片段，我将如何使用css的强大功能来实现这一点
溢出：隐藏


#主{
位置：相对位置；
}
.display_inlineblock{
浮动：左；
display:block；//内联或内联块，无所谓
}
.显示\u内联块\u文本{
溢出：隐藏；
}

您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。
只需使用
表格单元格即可

比如：


.wrapper{
显示：表格；
}
.display_inlineblock{
显示：表格单元格；
}

您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。
只需使用
表格单元格即可

比如：


.wrapper{
显示：表格；
}
.display_inlineblock{
显示：表格单元格；
}

您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。您好，这是一个很长的句子，会导致换行。
您的类名不正确！将
display\u inline block
更改为
display\u inline
。你能在这里贴一把小提琴吗！您使用的是div，它的宽度为100%。所以你可以使用宽度属性，它可以解决你的问题，你是对的。那么像这样的
display:table cell
呢：您的类名不正确！将
display\u inline block
更改为
display\u inline
。你能在这里贴一把小提琴吗！您使用的是div，它的宽度为100%。所以你可以使用宽度属性，它可以解决你的问题，你是对的。那么，像这样显示：表格单元格如何：哇，很有趣，谢谢！这就是我要找的……不过，
溢出
是如何做到的呢？我希望它能切掉文本，而不是强迫它尊重页边空白？哇，很有趣，谢谢！这就是我要找的……不过，
溢出
是如何做到的呢？我希望它能切掉文本，而不是强迫它尊重页边空白？是的。仅当文本比全宽短时才有效。当文本太长时，它将被视为一个整体，并被推到下一个块级别。在这种情况下，您需要在文本上使用图像上的设置
float:left
进行
空白：预换行
。对仅当文本比全宽短时才有效。当文本是
.image-wrap,
.text-wrap {
  display: inline;
  float:left;
}