2

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

我应该如何指定宽度？在 % 值或px?最佳实践中的值是什么？正确的值应该是多少？如果之前已经介绍过，请见谅......

图片在这里：在此处输入图像描述

编辑 这么多好的答案......非常感谢大家

4

6 回答 6

0

我认为你应该使用px

因为 % 将取决于用户的宽屏，所以图像可能显示不好

于 2013-04-26T12:52:49.983 回答
0

我看不到您的图像，但您可以使用百分比使用两个 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;
}
于 2013-04-26T12:53:21.443 回答
0

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

关于 % 或 px，它真的取决于你愿意编码的布局。如果您的布局是在流体布局中考虑的，那么您应该使用%但添加 amax-width这样它就不会延伸过去n px。

例如：

您的布局是使用 960px 网格为 1024px 屏幕制作的。但是对于 1280 像素的屏幕用户来说，让它稍微伸展一下会很酷。所以你把width:100%;and 放在 ir 之后，max-width:1280px.

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

于 2013-04-26T12:56:10.150 回答
0

我会建议使用 bodymargin:0并使用带有自动边距的容器 div，并使用像素作为内容的宽度和高度。

<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;
 }
于 2013-04-26T12:57:37.837 回答
0

第一：将主 div 保持在中心位置可以使用margin-left: auto; margin-right: auto;.

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

于 2013-04-26T12:58:47.693 回答
0

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

div#container { 
    width:95%; 
    max-width: 950px; 
    min-width: 700px; 
    margin: 0 auto 0 auto; 
}
于 2013-04-26T13:07:58.830 回答