文章/答案/技术大牛

发布

问利润率变小
EN

Stack Overflow用户

提问于 2013-09-01 16:37:55

回答 3查看 104关注 0票数 0

我想在我的网页上做左边距和右边距。我创建了一个主要的div元素并设置了边距。

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

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

html

css

回答 3

Stack Overflow用户

发布于 2013-09-01 16:41:42

试一试

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

和thry申请

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

票数 0

Stack Overflow用户

发布于 2013-09-01 16:45:21

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

票数 0

Stack Overflow用户

发布于 2013-09-02 21:11:06

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

感谢大家的帮助！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18556671

复制

相似问题

问利润率变小
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问利润率变小EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问利润率变小
EN