Question

您会看到div .second中的图片高于div .first中的最后一张图片，因此它们只会在距.text的下一行中。我可以做些什么来使div .second中的图像从div .first的图像进入下一行而不是下一行.text？

＆＃13;

<div id="first" style="display: block;">
    <span style="display: inline; float: left">
        <div><img width="300" height="225"></div>
        <div><img width="300" height="225"></div>
        <div><img width="300" height="225"></div>
    </span>
    <span id="text" style="display: inline;">
        <div>some text</div>
        <div>some text</div>
        <div>some text</div>
        <div>some text</div>
    </span>
</div>
<div id="second">
    <div><img width="300" height="225"></div>
    <div><img width="300" height="225"></div>
    <div><img width="300" height="225"></div>
    <div><img width="300" height="225"></div>
    <div><img width="300" height="225"></div>
    <div><img width="300" height="225"></div>
</div>

＆＃13;

Answer 1

我不知道我是否正确地理解了你的问题，但试试这个（只是在第二个div上添加了明确的内容）：

<div id="first" style="display: block;">
<span style="display: inline; float: left">
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
</span>
<span id="text" style="display: inline;">
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
</span>
</div>
<div id="second" style="clear: both">
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
</div>

Answer 2

还有一种可能：

<div id="first" style="display: inline-block;">
  <span style="display: inline-block; float: left;">
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
<div><img width="300" height="225"></div>
</span>
  <span id="text" style="display: inline-block;">
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
</span>
</div>
<div id="second" style="dispaly: inline-block;">
  <div><img width="300" height="225"></div>
  <div><img width="300" height="225"></div>
  <div><img width="300" height="225"></div>
  <div><img width="300" height="225"></div>
  <div><img width="300" height="225"></div>
  <div><img width="300" height="225"></div>
</div>

Answer 3

这里是一个清理过的版本 - 虽然我怀疑所有这些容器（内部<div>）应该是<ul> s - 它们看起来像我的列表） - 也是{ {1}} #second可能。这使用<div>作为内联元素，以确保它们填满容器的宽度。

＆＃13;

display: flex;

＆＃13;

* {margin: 0; padding: 0; box-sizing: border-box;}
#first,#second {
  width: 100%;
  }
#first {
  display: flex;
  }
#second {
  border: 1px solid blue;
  }
.images, .text {
  flex: 1 1 50%;
  border: 1px solid red;
  }

＆＃13;

如何在一行内的div中进行2个跨度，以便下一个div的内容不会到达第一个div的位置？

3 个答案: