Question

您好我是html＆amp;的新手CSS。我开始制作一个小盒子，我想展示一张桌子。但出于某种原因，我的桌子最终落在了盒子底下。 h4不知怎的仍然在盒子里。请帮忙。 box name = content2，我在这样的css中做了这个。

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

Answer 1

尝试使用overflow：hidden;在＃content2的css中，将所有css发布到表格中，更容易找出问题

Answer 2

中心tr标签中有四个td标签，顶部和底部tr标签中只有三个。这会打破你的桌子。将额外的td添加到顶部和底部tr标签或在其中一个中心td标签中使用colspan =“2”。

Answer 3

这种情况正在发生，因为div溢出属性的默认值是允许事物在它们溢出时呈现，所以你需要指定其他类似overflow：hidden;或溢出：auto;阻止它使用默认行为。

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

“可见：默认值。内容未被剪裁，可能会在内容框外呈现。”

为什么我的桌子在我的盒子下面？

3 个答案: