Question

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

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

但是当我在浏览器中调整页面大小时，边距会变小。但是，我需要修复它们，因此如果内容大小+左边距+右边距变得大于屏幕，则必须出现滚动条。

Answer 1

尝试

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

并恳求申请

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
   }

Answer 2

<div id="wrap" style="min-width: 950px;display: block; position: relative; padding-right: 150px;padding-left: 150px;">

试试这段代码

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

    <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>

enter image description here

Answer 3

我找到了一个使用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>

谢谢大家的帮忙！

边距变小

3 个答案: