爲什麼我的表格在我的box html下？

你好，我是新來的HTML & css。我開始製作一個小盒子，我想展示一張桌子。但由於某種原因，我的桌子在盒子下面結束了。 h4以某種方式留在箱子裏。請幫忙。 box name = content2，我在這樣的CSS中做了這個。爲什麼我的表格在我的box html下？

#content2{ 
    margin: 30px 0; 
    background: white; 
    padding: 20px; 
    clear: both; 
    box-shadow: 0px 1px 1px #999; 
    text-align: center; 
}

和我的HTML看起來像這樣：

<div id="content2"> 
    <h4>Onze producten</h4> 

    <table align="left"> 
     <tr> 
      <td>100</td> 
      <td>200</td> 
      <td>300</td> 
     </tr> 
     <tr> 
      <td> 
       <img src="../images/boy1.jpg" alt="Boy1" width="165" height="246" hspace="20" target="_blank" href="kleding.htm"> 
      </td> 
      <td> 
       <img src="../images/girl1.jpg" alt="Girl1" width="165" height="246" hspace="20" target="_blank" href="kleding.htm"> 
      </td> 
      <td> 
       <img src="../images/boy2.jpg" alt="Boy2" width="165" height="246" hspace="20" target="_blank" href="kleding.htm"> 
      </td> 
      <td> 
       <img src="../images/girl3.jpg" alt="Girl2" width="165" height="246" hspace="20" target="_blank" href="kleding.htm"> 
      </td> 
     </tr> 
     <tr> 
      <td>400</td> 
      <td>500</td> 
      <td>600</td> 
     </tr> 
    </table> 
</div>

來源

2013-10-15 Thomas Pen

不贊成使用align屬性。邊距應該用於表格和塊元素的對齊目的。 – cimmanon

嘗試使用溢出：隱藏;在你的css中爲＃content2，發表你所有的CSS表格，這將更容易找出你的問題

來源

2013-10-15 22:15:20 user934902

我沒有任何表格的CSS，但'overflow：hidden'訣竅。謝謝你，先生！ –

仍然無效的html標記 – Gavin

修復了這個問題 –

你有四個td標籤在中間的tr標籤，只有三個在頂部和底部tr標籤。這會破壞你的桌子。將其他td添加到頂部和底部tr標籤中，或者在其中一箇中心td標籤中使用colspan =「2」。

來源

2013-10-15 22:16:42 Gavin

我總是忘記了td標籤。謝謝你指出。 –

你可能會投票回答... – Gavin

雖然這是一個有效的觀察，但它不回答這個問題。這應該是一個評論。 – cimmanon

發生這種情況是因爲你的div的溢出屬性的默認值是當它們像這樣溢出時允許渲染的東西，所以你需要指定其他的東西像overflow：hidden;或溢出：auto;阻止它使用默認行爲。

進一步閱讀：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

「可見：預設值的內容沒有限幅，它可以在內容箱外面呈現」

來源

2013-10-15 22:28:48 Pandepic

爲什麼我的表格在我的box html下？

回答

相關問題