CSS中主div的正确宽度

假设我想创建一个包含所有内容的主div的HTML页面。 div应该包含其他div，并固定在页面中心，如图所示

我应该如何指定宽度？在%值或

px中的值中？

最佳做法是什么？ 正确的值应该是多少？ 请原谅，如果这之前已经涵盖

图片在这里：

编辑

---

这么多好的答案。。。非常感谢大家

我认为你们应该使用

px

---

原因%将取决于用户的宽屏幕，因此图像可能会显示不好

我看不到您的图像，但您可以使用百分比使用两个div

HTML:

---

要使div居中，只需在css上将左右边距设置为

auto

关于%或px，它实际上取决于您愿意编码的布局。如果您的布局是以流畅的布局思考的，那么您应该使用

%

，但添加

最大宽度

，这样它就不会超过

npx

例如：

您的布局是使用960px网格为1024px屏幕制作的。但对于1280px的屏幕用户来说，让它稍微伸展一下会很酷。所以你把

width:100%红外后，
最大宽度：1280px

因此，任何屏幕更大的用户都会看到1280px的布局。
我建议使用body
margin:0
并使用container div和margin auto，使用像素表示内容宽度和高度

<div class="container">

        <!-- HTML Content here -->
 </div>

.container{
   margin-right: auto;
   margin-left: auto;
}

第一：将主div保持在中间位置，可以使用
marginleft:auto完成；右边距：自动

第二：
我不认为有一个基本的最佳实践，因为变量的可用性在很大程度上取决于内容本身。
一个适用于两者的解决方案可能是使用固定宽度，具体取决于使用媒体查询的设备（桌面、桌子、电话）。
这一切都取决于您将要呈现的内容以及您想用它做什么。如果不需要扩展内容，或者如果要将文本/设计限制在div的宽度内，则可以选择使用固定宽度布局。不过，您可能需要考虑的是使用百分比和固定宽度的组合。例如，只要最小宽度不低于700px且最大宽度不超过950px，您可以选择将DIV设置为页面的95%。其结果是一个DIV，它将在指定的约束内展开和收缩

div#container { 
    width:95%; 
    max-width: 950px; 
    min-width: 700px; 
    margin: 0 auto 0 auto; 
}

<div class="container">

        <!-- HTML Content here -->
 </div>

.container{
   margin-right: auto;
   margin-left: auto;
}

.left-div {
   float: left;
   width:200px // use pixel to control width
   margin-left: 5px;
 }
.right-div {
   float: right;
   width:200px;
   margin-right: 5px;
 }

div#container { 
    width:95%; 
    max-width: 950px; 
    min-width: 700px; 
    margin: 0 auto 0 auto; 
}