html段落新行，如果在inline-block div中没有位置

Question

i在Div两个Divs中有浮子（左右）。在右DIV中有段落。所有两个Divs都有内联块显示。如果右DIV的段落太长，则右DIV跳过左侧，并设置为显示块。

我想在paraghraps上做新线，如果太长。

代码：

.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

您应该为它们分配空间。我喜欢在这些实例中使用浮子，因此您可以添加浮子：左宽度：每一个，类似的东西50％。

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

您已经有了浮子，您只需要指定宽度即可。如果您愿意，它们也可能不是静态的％，但是如果静态尺寸不适合屏幕，它们会像您的示例一样破裂。

请参阅此处的工作：https：//jsfiddle.net/3ltluxbc/3/

只是小提琴上的注释 - 我将您的IMG尺寸更改为100％并删除边框，因此可以进行扩展，您可以更改它以适合您的设计。

Answer 2

向右DIV添加宽度。这将迫使文本包裹。如果没有指定的宽度，DIV的尺寸将增加，直到达到包装DIV的最大尺寸或页面