如何让容器内两个div并排并居中？已尝试float和margin:auto无效

问题根源 #

• 两个子div(#first、#second)各设了500px宽度，总宽度1000px，超过了容器#container的900px宽度，自然没法并排
• 容器居中失效是因为body默认有边距，干扰了margin:auto的生效逻辑

方法一：Flexbox布局（推荐） #

Flex是当前最省心的布局方式，自动处理并排、对齐和间距，代码更简洁。

修改后的完整CSS：

/* 重置body默认边距，避免干扰布局 */
body {
  margin: 0;
  padding: 0;
}

header {
  margin: 0; /* 替换原来的-8px，用body重置更规范 */
  position: sticky;
  top: 0;
  height: 75px;
  background-color: antiquewhite;
}

div#menu {
  margin: auto;
}

nav {
  position: absolute;
  left: 1400px;
  top: 35px;
}

a {
  margin: auto;
  text-decoration: none;
  font-size: 24px;
  color: black;
}

#first,
#second {
  border: 1px solid black;
  height: 267px;
  width: 440px; /* 调整宽度，加上内边距后总宽度不超容器 */
  font-family: Arial;
  box-shadow: 5px 5px 5px;
  padding: 10px; /* 给文本加内边距，避免贴边 */
}

#second {
  background-color: aqua;
}

#first {
  background-color: yellow;
}

#container {
  height: 550px;
  width: 900px;
  border: 5px solid blue;
  margin: 30px auto; /* 上下留间距，左右自动居中 */
  display: flex; /* 开启Flex布局 */
  justify-content: space-around; /* 子元素均匀分布 */
  align-items: center; /* 子元素垂直居中 */
  gap: 10px; /* 子元素之间的间距 */
}

#one {
  position: absolute;
  top: 275px;
  left: 475px;
  color: green;
  font-size: 24px;
}

footer {
  position: absolute;
  bottom: 0;
  height: 75px;
  width: 100%;
  background-color: antiquewhite;
}

方法二：修复Float布局 #

如果非要用float，得调整子元素宽度，同时给容器清除浮动：

修改后的完整CSS：

/* 重置body默认边距 */
body {
  margin: 0;
  padding: 0;
}

header {
  margin: 0;
  position: sticky;
  top: 0;
  height: 75px;
  background-color: antiquewhite;
}

div#menu {
  margin: auto;
}

nav {
  position: absolute;
  left: 1400px;
  top: 35px;
}

a {
  margin: auto;
  text-decoration: none;
  font-size: 24px;
  color: black;
}

#first,
#second {
  float: left; /* 启用float */
  border: 1px solid black;
  height: 267px;
  width: 430px; /* 压缩宽度，留出边距空间 */
  font-family: Arial;
  box-shadow: 5px 5px 5px;
  padding: 10px;
  margin: 10px; /* 子元素之间留间距 */
}

#second {
  background-color: aqua;
}

#first {
  background-color: yellow;
}

#container {
  height: 550px;
  width: 900px;
  border: 5px solid blue;
  margin: 30px auto;
  overflow: hidden; /* 清除浮动，让容器包裹住浮动的子元素 */
}

#one {
  position: absolute;
  top: 275px;
  left: 475px;
  color: green;
  font-size: 24px;
}

footer {
  position: absolute;
  bottom: 0;
  height: 75px;
  width: 100%;
  background-color: antiquewhite;
}

核心修改说明 #

1. 子元素宽度调整：把500px压缩到430-440px，加上边框、内边距后总宽度不超过容器的900px
2. 容器居中：给body重置margin:0，确保#container的margin:auto能正常生效
3. Flex方案：用display:flex替代float，无需手动处理清除浮动和间距
4. Float方案：启用float:left，用overflow:hidden让容器正确包裹浮动子元素

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