HTML/CSS布局疑难：首个p元素无法触达容器边缘的问题排查求助

嘿，我仔细看了你的HTML和CSS代码，找到你遇到的布局问题的核心原因了——全局的div选择器错误地作用在了最外层的#normal容器上，导致整个布局的层级结构混乱，进而让第一个段落看起来无法触达容器边缘。

具体问题拆解 #

1. 全局div样式的误应用：你的CSS里写了div { float: left; border: 5px solid black; background: red; ... }，这会匹配页面上所有的<div>元素，包括包裹三个菜单项的#normal容器。这就导致#normal本身变成了一个浮动的、带黑边框的红色盒子，而不是你预期的全屏容器。
2. 媒体查询的叠加错误：在桌面端的媒体查询中，div { margin:1.66%; width:30%; }同样会作用于#normal，让它的宽度只有页面的30%。里面的三个菜单项div又各占30%宽度，最终第一个段落所在的容器被压缩得极小，自然看起来无法触达边缘。
3. 默认样式的干扰：你只设置了box-sizing: border-box，但没有重置浏览器默认的margin和padding——比如<body>默认有8px的边距，<p>元素默认有上下边距，这些都会加剧布局的偏移感。

一步步解决问题 #

1. 修正div选择器，仅作用于菜单项

把针对菜单项的样式改成仅作用于#normal内部的div，避免影响外层容器：

/* 仅对#normal里的菜单项div生效 */
#normal > div {
  overflow: auto;
  background: red;
  position: relative;
  float: left;
  border: 5px solid black;
}

/* 桌面端样式同样只作用于内部菜单项 */
@media (min-width: 992px) {
  #normal > div {
    margin: 1.66%;
    width: 30%;
  }
}

2. 重置全局默认样式

在全局选择器里添加margin:0和padding:0，清除浏览器的默认边距，让布局从干净的状态开始：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

3. 优化#normal容器的样式

确保#normal能正确包含内部的浮动元素，保持全屏宽度：

#normal {
  background: white;
  border: 0;
  width: 100%;
  overflow: auto; /* 保证内部浮动元素被正确包裹 */
}

4. 调整段落样式（可选）

如果想让.text段落完全填满父容器的内容区域，可以显式设置宽度，并添加一点内边距让文本更美观：

p.text {
  clear: right;
  width: 100%;
  padding: 10px;
}

修正后的完整CSS #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#normal {
  background: white;
  border: 0;
  width: 100%;
  overflow: auto;
}

#normal > div {
  overflow: auto;
  background: red;
  position: relative;
  float: left;
  border: 5px solid black;
}

h1 {
  text-align: center;
  margin: 20px auto;
  width: 50%;
  clear: both;
}

p.text {
  clear: right;
  width: 100%;
  padding: 10px;
}

p.title {
  float: right;
  z-index: 1;
  width: 33.33%;
  border-left: 5px solid black;
  border-bottom: 5px solid black;
  text-align: center;
  font: bold 1em Arial, Helvetica, sans-serif;
  margin: 0;
  background: blue;
  background-size: cover;
  padding: 5px;
}

@media (min-width: 992px) {
  #normal > div {
    margin: 1.66%;
    width: 30%;
  }
}

这样修改后，你的第一个段落就能正常触达容器边缘，整个菜单布局也会按照你的预期工作啦！

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