html - 如何修复 HTML 中的重叠框

Question

我正在为我的视频制作网站，并且正在设置类似于视频缩略图的图片。我希望每“行”有 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>  

有什么办法可以让两个盒子上线吗？

Answer 1

试试这个：CSS>>>

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

#videoList2{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
text-align: center;
text-indent: 20px;
}
#videoContainer{width: 1020px; height: 300px; background-color: pink}

`

这是 HTML：

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

Answer 2

如果窗口足够大以使两个框可以放在同一行上，这将起作用：

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

CSS：

    #videoList{
       display: block-inline;
       width: 480px;
       margin: 15px;
       background: #DBDBDC;
       float: left;
       text-align: center;
       text-indent: 20px;
       }

我添加了“显示：块内联；” 并删除了您的“清除：两者；” “明确：两者；” 类似于“浮动”，但倾向于将事情推到下面

显示：块内联；与使事物表现为文本有关，并且文本将显示在整个页面上，而不是在页面下方。