Question

我在div中有两个带浮动的div（左和右）。在右边div有段落。所有这两个div都有内联块显示。如果右侧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;
}

你已经有浮动，你只需要指定宽度。如果你愿意的话，它们也可能是静态的，但是如果静态尺寸不适合屏幕，它们会像你的例子那样破坏。

看到在这里工作：Grails WebServices REST

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

Answer 2

向右侧div添加宽度。这将强制文本换行。如果没有指定的宽度，div将增加大小，直到达到包装div或page

的最大大小

如果内联块div

2 个答案: