如何修复HTML中的重叠框

Question

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

我添加 “显示：块内联;”并删除了你的“明确：两者;” “明确：两者;”类似于“浮动”，但倾向于推动波纹管

display：block-inline;是为了使事情像文本一样行事，文本将在页面上显示而不是在页面上显示。