如何修复HTML中的重叠框

我正在为我的视频制作一个WebSite，我正在设置类似视频缩略图的图片。我希望每行有2张图片。但它看起来是这样的：

                       -----
                       |   |
                       -----
                              -----
                              |   |
                              -----

我“画”的每个盒子都是一个有图片和文字的盒子

以下是CSS：

#videoList{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
clear: both;
text-align: center;
text-indent: 20px;
}
#videoList2{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: right;
clear: both;
text-align: center;
text-indent: 20px;
}

这是HTML：

<div id="videoList">
                <p>
                <a href="something.html">video title</a>
                </p>
                <img src="images/img.jpeg" />
            </div>

<div id="videoList2">
                <p>
                <a href="something.html">video title</a>
                </p>
                <img src="images/img.jpeg" />
            </div>  

<div id="videoContainer">
    <div id="videoList">
     <p>
         <a href="something.html">video title</a>
     </p>
     <img src="images/img.jpeg" />
    </div>

   <div id="videoList2">
    <p>
     <a href="something.html">video title</a>
    </p>
    <img src="images/img.jpeg" />
   </div>  
</div>

有什么我可以帮你弄到两个箱子吗

试试这个： CSS>>>

`

这是HTML：

<div id="videoList">
                <p>
                <a href="something.html">video title</a>
                </p>
                <img src="images/img.jpeg" />
            </div>

<div id="videoList2">
                <p>
                <a href="something.html">video title</a>
                </p>
                <img src="images/img.jpeg" />
            </div>  

<div id="videoContainer">
    <div id="videoList">
     <p>
         <a href="something.html">video title</a>
     </p>
     <img src="images/img.jpeg" />
    </div>

   <div id="videoList2">
    <p>
     <a href="something.html">video title</a>
    </p>
    <img src="images/img.jpeg" />
   </div>  
</div>

如果窗口足够大，可以将两个箱子放在同一条线上，则此操作将有效：

<div id="videoList">
            <p>
            <a href="something.html">video title</a>
            </p>
            <img src="images/img.jpeg" />
        </div>
<div id="videoList">
            <p>
            <a href="something.html">video title</a>
            </p>
            <img src="images/img.jpeg" />
        </div>

我添加了“display:block inline；”并删除了“clear:both；” “clear:tware；”与“float”类似，但倾向于把事情推到下面

---

显示：块内联；就是让事情表现为文本，文本将显示在整个页面上，而不是页面下方。

将它们都向左浮动，直到第二个元素之后才使用第三个元素清除，只是为了清除。