html - CSS 自动高度设置不考虑表格子元素？

Question

我试图将表格放在 div 中以便于布局。但是一旦我将 div 的高度从固定值更改为“自动”，div 的高度就会降为零。这是代码外观的简化版本。

<div class="box">
    <table>
       <tr>
       <td> <img src="something.jpg" alt=""> </td>
       <td> <p>something<p> </td>
       </tr>
    </table>
</div>

我应该做些什么来拉伸(stretch) div？这是 div 的 CSS。我真的觉得我缺少一些简单的东西。

.box {
float: center;
margin: 10px 0px 10px 70px;
height: auto;
width: 600px;
text-align: left;
border: 2px solid #e3e2e2; 
border-radius: 5px;
padding: 0px 0px 0px 0px;   
font-size: 25px;
}

感谢您的帮助。

Answer 1

<td> <p>something<p> </td>

您将在段落中打开另一个段落，而不是关闭现有段落。这在不同的浏览器中可能会产生许多不同的效果，尽管在这种情况下它不会影响每个浏览器的最新版本(它可能会影响旧浏览器)。

除此之外，修复您的 CSS 应该可以防止其他错误:

.box {
margin: 10px 0 10px 70px;
height: auto; /* Is this needed? Height is auto by default. */
width: 600px;
text-align: left; /* Is this needed? Text-align is left by default. */
border: 2px solid #e3e2e2; 
border-radius: 5px;
padding: 0;   
font-size: 25px;
}