如何修復HTML中的重疊框

我正在爲我的視頻製作一個webstite，並且正在設置類似於視頻縮略圖的圖片。我希望每個「線」有2張圖片。但是這看起來是這樣的：如何修復HTML中的重疊框

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

我畫的那些盒子都是帶有圖片和一點文字的盒子。

這裏是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>

有什麼我可以做的就是上線兩個箱？

來源

2013-04-04 user2246668

把它們都浮起來，直到第二個元素使用第三個元素後才清除，只是爲了清除。 – 2013-04-04 20:59:51

試試這個： 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>

來源

2013-04-04 21:41:06 user2246860

這將工作提供窗口是兩個箱足夠大適合同一條線：

<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;是爲了使事情像文本一樣行事，文本將在頁面上顯示而不是在頁面上顯示。

來源

2013-04-04 21:42:12

如何修復HTML中的重疊框

回答

相關問題