MySQL数据表插入content div容器显示异常问题求助

你遇到的这个布局问题，主要有两个核心原因：table的浮动导致容器高度塌陷，还有一处HTML结构错误，咱们一步步来解决：

1. 修复HTML结构错误 #

先看你的PHP循环里的代码，这里多了一个未闭合的<td>标签，会破坏table的结构，可能间接导致布局异常：

echo '<tr><td align="left">' . $row['imie'] . '</td><td align="left">' . $row['nazwisko'] . '</td><td align="left">';

把多余的<td>删掉，改成正确的结构：

echo '<tr><td align="left">' . $row['imie'] . '</td><td align="left">' . $row['nazwisko'] . '</td></tr>';

2. 解决table跳出div的核心问题 #

问题的根源是你给table加了align="left"属性——这个老旧的HTML属性会让table元素浮动（float:left），脱离正常的文档流。而你的.content div是块级元素，默认不会包裹浮动元素，导致div的高度塌陷成0，看起来table就跑到了div外面。

这里有几种靠谱的解决方法，选一种适合你的：

方法一：移除align属性，用CSS控制对齐（推荐） #

align是HTML4的老旧属性，现在更推荐用CSS来控制布局。先把table的align="left"删掉：

echo' <table cellspacing="5" cellpadding="8" > 
<tr><td align="left"><b>First Name</b></td> 
<td align="left"><b>Last Name</b></td></tr>';

然后在CSS里给table设置左对齐效果：

.content table {
  margin-left: 0; /* 实现和原来align="left"一致的左对齐 */
  width: auto; /* 让table自适应内容宽度 */
}

这样table会回到正常文档流里，.content div就能正常包裹它了。

方法二：让div容器包裹浮动元素 #

如果你不想移除align="left"，可以给.content div添加清除浮动的样式，强制它包裹住浮动的table。最简单的方式是用overflow:hidden：

.content {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  color: #000000;
  border-bottom: 14px solid #333333;
  overflow: hidden; /* 关键：让容器包裹浮动元素 */
}

如果担心overflow:hidden会裁剪超出div的内容，也可以用伪元素清除浮动的通用方案：

.content {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  color: #000000;
  border-bottom: 14px solid #333333;
  position: relative; /* 确保伪元素定位正常 */
}

.content::after {
  content: "";
  display: table;
  clear: both;
}

方法三：用CSS float替代align属性 #

如果你还是想要table左浮动的效果，建议用CSS的float:left替代老旧的align属性。先移除table的align="left"，然后给table加CSS：

.content table {
  float: left;
}

同时也要给.content div加上上面提到的清除浮动样式，确保容器能包裹住浮动的table。

按照上面的步骤修改后，table应该就能正常显示在.content div内部了。

内容的提问来源于stack exchange，提问作者kosteklvp