【问题标题】:Reducing the space equally when resizing browser window调整浏览器窗口大小时平均减少空间
【发布时间】:2015-06-12 10:43:59
【问题描述】:

当调整浏览器窗口的大小时,浏览器只会减少元素后面的空间。我想像在 Facebook 中一样减少左右两侧的空间。

这是我的代码

CSS:

body{
     margin-left:10%;
     margin-right:10%;
}

HTML:

<body>
Some content
.
.
.
.
</body>

首先我想给身体一个min-width。但是屏幕尺寸较小的计算机将是一个问题。 min-width 也不是很好的解决方案。

【问题讨论】:

  • 主体不应该有边距,因为当你缩小主体时(通过增加它的边距),将没有可见的元素来保持背景。

标签: javascript jquery html css


【解决方案1】:

只需将宽度80% 分配给您的body 并将margin-leftmargin-right 分配给auto 以进行居中对齐

   body{
      margin:0 auto;
      width:80%;
    }

建议:

给 body 赋予样式不是一个好习惯,给页面中的顶级父 div 赋予样式

像这样,

<body>
<div class="container">
       all page elements.....
</div>
</body>

CSS:

container{
          margin:0 auto;
          width:80%;
        }

【讨论】:

  • 如果您的问题解决了,请点击接受的答案,对于不知道哪个是正确答案的用户... @harikrishnan.n0077
【解决方案2】:
【解决方案3】:

有什么问题

width: 50em;
max-width: 95%;
margin: 0 auto;

正如网络上多次建议的那样,显示一个居中的包装器,它会随着浏览器窗口收缩和扩展,左右间距相等……

【讨论】:

    猜你喜欢
    • 2023-04-07
    • 2015-04-20
    • 2012-02-23
    • 2012-05-20
    • 1970-01-01
    • 2012-05-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多