盒子中的盒子&x2B；文本，页面上的对齐HTML/CSS

我需要将我的文本排列在框中，两个框并排排列，每个框的右上角都有一个标题类型的元素。这就是我到目前为止所说的：做我想做的，但看起来很难看，因为它有点不协调。有什么更好的方法？但是没有自举

p{
边框：1px纯黑；
}
#p1{
宽度：60px；
高度：20px；
背景颜色：橙色；
字体大小：大号；
浮动：对；
}
#p2{
边框：1px纯黑；
背景色：淡蓝色；
}
#狗盒子{
边框：1px纯黑；
背景色：淡蓝色；
}
div+p{
宽度：40px；
高度：80px；
背景颜色：橙色；
字体大小：大号；
浮动：对；
}
#首先{
宽度：330px；
高度：250px；
背景：浅蓝色；
溢出：可见；
边框：1px纯黑；
}
#第一#标题{
位置：相对位置；
宽度：20%；
身高：7%；
保证金：自动；
利润底部：65%；
背景：橙色；
左：6px；
浮动：对；
边框：1px纯黑；
保证金：1px；
}
#第二{
宽度：330px；
高度：250px；
背景：浅蓝色；
溢出：隐藏；
边框：1px纯黑；
位置：相对位置；
左：332px；
底部：252px；
保证金：1px；
}
#第二个#标题{
位置：相对位置；
宽度：20%；
身高：7%；
保证金：自动；
利润底部：65%；
背景：橙色；
左：6px；
浮动：对；
边框：1px纯黑；
}

第一箱
读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它或多或少具有字母的正态分布，而不是使用“此处的内容，
内容在这里，使它看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。各种版本
经过多年的发展，有时是偶然的，有时是有意的（注入幽默等）。
第二箱
与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克抬起头来
其中一个比较晦涩的拉丁语单词，concertetur，来自《洛伦·伊普斯姆》的一段文字，通过对古典文学中该词的引用，发现了这个毫无疑问的来源。Lorem Ipsum来自“de Finibus Bonorum”第1.10.32节和第1.10.33节
西塞罗于公元前45年创作的《爱与恶的极端》。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet…”来自第节中的一行
1.10.32.
读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它或多或少具有字母的正态分布，而不是使用“此处的内容，
内容在这里，使它看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。各种版本
经过多年的发展，有时是偶然的，有时是有意的（注入幽默等）。

我强烈建议您使用css网格或flexbox作为现代方法。在这种情况下，css网格是更好的方法，因为它可以同时控制高度和宽度

为此，我使用类：

grid wrapper

将您的两个盒子包装在另一个div中。 我使用：

display:grid将该框更改为网格系统。
要获得使用的两列：
网格模板列：重复（2，1fr）。如果您想要3列，可以将2改为3或任意数字以获取更多信息。
要分隔框，可以使用：
网格间距

有一件事我想提醒您：您两次使用ID
#header
使用了无效的HTML。ID必须是唯一的。永远！因此，我把它改成了一个类


正文{
保证金：0；
}
.网格包装器{
显示：网格；
网格模板列：重复（2，1fr）；
栅隙：10px；
填充：10px；
}
#首先,，
#第二{
背景：浅蓝色；
边框：1px纯黑；
填充：10px；
}
.标题{
宽度：40%；
高度：自动；
裕度：-8px-8px 0.2em 0.2em；
背景：橙色；
浮动：对；
边框：1px纯黑；
文本对齐：居中；
}

第一箱
读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它或多或少具有字母的正态分布，而不是使用“此处的内容，
内容在这里，使它看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。各种各样的
版本经过多年的演变，有时是偶然的，有时是有意的（注入幽默等）。
第二箱
与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克抬起头来
其中一个比较晦涩的拉丁语单词，concertetur，来自《洛伦·伊普斯姆》的一段文字，通过对古典文学中该词的引用，发现了这个毫无疑问的来源。Lorem Ipsum来自“de Finibus Bonorum”第1.10.32节和第1.10.33节
西塞罗于公元前45年创作的《爱与恶的极端》。这本书是一篇关于伦理学理论的论文，非常受欢迎