如果行内 block div 中没有位置，则 HTML 段落换行

Question

我在 div 中有两个带 float 的 div(左和右)。在右边的 div 中有段落。所有这两个 div 都有内联 block 显示。如果右侧div中的段落太长，则右侧div跳过左侧，并设置为显示 block 。

如果太长，我想换行。

代码:

.left {
  margin: 30px;
  float: left;
  display: inline-block;
}
.right {
  float: left;
  margin-top: 30px;
}
.right p {
  margin: 10px;
  font-weight: 900;
}

<div class="box_container">
  <div class="left">
    <img src="{url}">
  </div>
  <div class="right">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
  </div>
</div>

当段落中的文本太长时:

.left {
  margin: 30px;
  float: left;
  display: inline-block;
}
.right {
  float: left;
  margin-top: 30px;
}
.right p {
  margin: 10px;
  font-weight: 900;
}
.left img {
  border: 5px solid white;
}

<div class="box_container">
  <div class="left">
    <img src="http://monitorgame.com/m/games/001.jpg">
  </div>
  <div class="right">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5 text text text text text text lalalalalalalalalalalallalalallalalalala</p>
  </div>
</div>

Answer 1

您应该为它们分配空间。我喜欢在这些情况下使用 float ，例如，您可以为每个添加 float:left width: 50%，诸如此类。

 .left {
 margin: 30px;
  float: left;
 width: 50%;
}

.right {
 float: left;
 width: 50%
  margin-top: 30px;
}

你已经有了 float ，你只需要指定宽度。如果您愿意，它们也可以是静态的，而不是 % ，但是如果静态尺寸不适合屏幕，它们将像您的示例一样中断。

请参阅此处工作:https://jsfiddle.net/3LtLuxbc/3/

请注意 fiddle - 我将您的 img 大小更改为 100% 并删除了边框以便缩放，您可以更改它以适合您的设计。