0

我想在我的网页上设置左右边距。我制作一个主 div 元素并设置边距

<div id = "wrap" style="display: block; margin-left:200px;margin-right:200px;">
...
</div>

但是当我在浏览器中调整页面大小时，边距变小了。但是，我需要将它们固定，所以如果内容大小+左边距+右边距变得大于屏幕，滚动条必须出现。

4

3 回答 3

0

我找到了使用 javascript 的解决方案。也许它不是最好的，但它确实有效。在我输入的onload和onresize事件处理程序中

var content_width = 960;                
var window_width = parseFloat($(window).width());

var margin_perc = 0.141;     
var margin_width =window_width*margin_perc;

var w = (content_width+margin_width).toString()+"px";

$("#top").css("width",w);
$("#top").css("margin-right",(margin_width).toString()+"px");

$("#top").css("margin-left",(margin_width).toString()+"px");

我还对齐body元素的样式并阻止“wrap”：

<body id="top" style = " width: 960px;margin-left:100px;margin-right:100px;
overflow: auto;position: absolute;">

<div id = "wrap" style="width: 960px;display: block;">
...
</div>
</body>

谢谢大家帮忙！

于 2013-09-02T13:11:06.037 回答
0 
<div id="wrap" style="min-width: 950px;display: block; position: relative; padding-right: 150px;padding-left: 150px;">

试试这个代码

你设置边距，我设置绝对位置，所以左右必须是200px！或者只是添加到您的样式溢出：自动

    <div id="wrap" style="display: block; margin-left:200px;margin-right:200px;overflow: auto;">
.............
.............
.............
.............
.............
.............
.............
.............
.............
.............
.............
.............
.............
.............
</div>

并且位置绝对

<div id="wrap" style="display: block; position: absolute;left: 200px;right: 200px;background: black;color: white;"> ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. ................. </div>

在此处输入图像描述

于 2013-09-01T08:45:21.200 回答
0

尝试

margin-left:200px!important;margin-right:200px!important;

并尝试申请

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
   }
于 2013-09-01T08:41:42.183 回答