如果内联块 div 中没有位置，则 HTML 段落换行答案

【问题标题】：HTML paragraph new line if no place in inline-block div如果内联块 div 中没有位置，则 HTML 段落换行
【发布时间】：2015-05-08 16:12:16
【问题描述】：

我在 div 中有两个带有浮动的 div（左和右）。在右 div 中有段落。所有这两个 div 都具有内联块显示。如果右 div 中的段落太长，则右 div 会跳过左边，并设置为显示块。

如果太长，我想换行。

代码：

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

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

在这里工作：https://jsfiddle.net/3LtLuxbc/3/

只是一个关于小提琴的注释 - 我将您的 img 大小更改为 100% 并删除了边框以便它可以缩放，您可以更改它以适合您的设计。

【讨论】：

【解决方案2】：

为右边的 div 添加一个宽度。这将强制文本换行。如果没有指定宽度，div 的大小会增加，直到达到包装 div 或页面的最大大小

【讨论】：