html - 如何在一行中在 div 内制作 2 个跨度，以便下一个 div 的内容不会转到第一个 div 的位置？

Question

您会看到来自 div .second 的图像比来自 div .first 的最后一张图像更靠上，因此它们正好位于 span 的下一行。文本。我该怎么做才能使 div .second 中的图像进入 div .first 图像的下一行而不是 span .text 的下一行?

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

Answer 1

我不知道我是否正确理解了你的问题，但试试这个(只是在第二个 div 上添加了 clear: both):

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