Html 在部分而不是正文中定义页面宽度

发布于12月22日

我希望我的页面有一个固定的宽度，比方说1440px.我通常将宽度放在正文中，它适用于所有元素.在我的新项目中，我需要有一个白色背景的部分，宽度被固定使它只有1440px是白色的.我设法解决了这个问题，方法是从Body中删除宽度并创建一个类:

.width-fix {
  width: 144rem;
  margin: 0 auto;
  padding: 0 1.2rem;
}

我将这个类设置 for each 我不需要着色的部分的附加.

这是解决问题的正确方法，还是有更好的办法？目前，它的作用就像一种护身符.

我两周前开始学习HTML/css，如果这是个愚蠢的问题，很抱歉

**Edit: Image for clarification

推荐答案

是的，我通常使用诸如CONTAINER或SECTION之类的类名来处理所有最通用的默认样式. 每个元素都打包在一个部分中，该部分具有正确的背景色，并且有一个div，其中包含适当的宽度、页边距和填充容器.

所以大概是这样的:

  .block {
 background-color: green;
 }
 .container {
 max-width: 1440px;
 margin: 0 auto;
 padding: 25px;
 }
 <section class="block">
 <div class="container">
 
 </div>
 </section>

Html 在部分而不是正文中定义页面宽度

推荐答案

Html相关问答推荐

一次悬停可触发同一分区中的另一次悬停

CSS复选框并排

应用于文本而不是弹性容器的Flexbox属性

在悬停时应用文本装饰

轨道上的居中范围滑块拇指(Webkit)

Style=背景图像URL引用变成&；Quot；

当文本添加到元素中时，将元素拉到页面上

将导航项目底部边框与导航栏对齐

如何在CSS中延迟触发2个转换？

rmarkdown HTML数字不适用于针织衫_1.44

如何防止弹性项目溢出容器？

对齐列表项内的文本，使其不在元素装饰下

文本不显示在 div 下方

HTML 如何根据屏幕尺寸调整/裁剪视频背景？

有没有办法在 Flutter 中创建这个浮动标签表单？

在shiny 的应用程序中使用图标功能时出错

单击时 HTML 锚元素不重定向到相对路径

CSS 斜角与 3 行对齐

如何在 Tailwind CSS 中创建响应式网格布局？

Bootstrap 5 网格问题，div 向下转义