CSS中主div的正确宽度

Question

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

我应该如何指定宽度？在％值或px?中的值是什么最佳做法？ 什么应该是正确的价值？ 如果之前有这个问题，请抱歉....

图片在这里：

修改 非常好的答案......非常感谢你们

Answer 1

在我看来，你应该使用px

因为％将取决于用户的宽屏幕，因此图像可能显示错误

Answer 2

我无法看到您的图像，但您可以使用百分比来处理两个div。

HTML：

<div id="outer">  
   <div id="inner">Your centered div</div>
</div>

CSS：

#outer {
    width: 100%;
}

#inner {
    width: 50%; // whatever width you want - I can't see your image
    margin: 0 auto;
}

Answer 3

要将div居中，只需将左右边距放在css上的auto。

关于％或px，它实际上取决于您愿意编码的布局。如果您的布局是在流畅的布局中进行思考，那么您应该使用%但添加max-width，这样它就不会超过n px。

例如：

您使用960px网格为1024px屏幕进行了布局。但让它为1280px屏幕用户延伸一点也很酷。所以你把width:100%;放在ir max-width:1280px之后。

因此任何拥有更大屏幕的用户都会看到1280像素的布局。

Answer 4

我建议使用body margin:0并使用带有margin auto的容器div，并使用pixel作为内容宽度和高度。

<div class="container">

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

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

Css float左右控制div的流量。如果你想放置两个div，左右，那么使用

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

Answer 5

首先：将主要div保持在中心位置可以使用margin-left: auto; margin-right: auto;。

第二： 我不认为，有一个基本的最佳实践，因为变量的可用性在很大程度上取决于内容本身。 覆盖两者的一个可用解决方案可能是使用固定宽度，具体取决于使用媒体查询的设备（桌面，桌面，电话）。

Answer 6

这一切都取决于您将要呈现的内容以及您想要使用它做什么。如果不需要展开内容，或者您​​希望将文本/设计限制在DIV的宽度范围内，则可以选择使用固定宽度布局。但是，您可能要考虑的一件事是使用百分比和固定宽度的组合。例如，只要最小宽度不低于700px且最大宽度不超过950px，您可以选择DIV为页面的95％。结果是DIV将在您指定的约束内扩展和收缩。

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