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 的左边创建一个新行，当我预期它会从它自身的下方开始。< / p>

我在这里缺少什么？

更新

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

Answer 1

您考虑使用flex display吗？

 display: flex;

Answer 2

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

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

Answer 3

这是因为你的“.entry div”显示在css部分设置为“inline-block”。将它设置为“内联”，它将按预期运行

CSS定位 - 内联块行中的Div向下跳跃

3 个答案: