CSS 定位 - Div in an inline-block row Jumping Down

Question

我创建了 this JSFiddle 来说明我希望内联块如何排列。

<div class="entry">
  <div class="title">Hello</div>
  <div class="divider">&nbsp;</div>
  <div class="content">This is some content that goes down to the next level when it should actually stay in the same place, just create a new line right below where it was supposed to start.</div>
</div>

.entry {
  margin-bottom: 40px;
  div {
    display: inline-block;
  }
  .divider {
    width: 0;
    border-left:1px black solid;
  }
}

在 JSFiddle 的第三个示例中，当文本溢出时，它会在父 div 的左侧创建一个新行 ，当我预计它会在其下方开始。

我在这里错过了什么？

更新

在尝试了一些建议的方法之后，我想出了 this JSFiddle，它确实解决了内容框问题，但是，.title 现在改变它的宽度并且不会保持分配的宽度。我该如何解决这个问题？

Answer 1

那是因为你的“.entry div”显示在css部分设置为"inline-block"。将其设置为 "inline"，它将按您预期的方式运行

Answer 2

您考虑过使用 flex display 吗？

 display: flex;

Answer 3

你想要这样的东西吗？
只需编辑您的 css
见：https://jsfiddle.net/fmwd3x7m/9
...而且您必须正确打开和关闭您的钥匙

.entry {
    margin-bottom: 40px;
  }
 div {
    display: flex;
  }
.divider {
    width: 0;
    border-left:1px black solid;
  }

CSS 定位 - Div in an inline-block row Jumping Down

CSS Positioning - Div in an inline-block row Jumping Down

html

css

position