如何添加保证金而不将内容推出屏幕？

我有两列的布局，我想添加一些padding \ margin到右栏，而不是将内容推离屏幕。在我的插图中，箭头指向了我想要额外空间的位置。当我为红色div添加边距或填充时，会将红色div从屏幕推向右侧，我想避免这种情况。有没有一种方法可以做到这一点？也许包装div或什么的？由于如何添加保证金而不将内容推出屏幕？

enter image description here

来源

2012-01-19 NullReference

请向我们显示您的代码。 –

我使用telerik的mvc分离器来生成2列布局。我会努力上传html。从目前为止的评论，我认为我可能不得不使用JavaScript来调整添加填充后的红色div的大小 – NullReference

在没有看到代码，我可以告诉你的是...

如果你不想要的内容被推离屏幕，然后你所有的元素的width - 包括margin和padding - - 必须加起来不超过100％或最大像素宽度。（和频繁，混合像素和百分比时，你可能想就更少了。）

下面是一个简单的例子：

<div id="left"></div> 

<div id="right"></div> 

#left{ 
    border:1px solid red; 
    width:20%; 
    height:50px; 
    margin-right:4%; 
    float:left; 
} 

#right{ 
    border:1px solid red; 
    width:75%; 
    height:50px; 
    float:left; 
}

http://jsfiddle.net/nWEnj/

来源

2012-01-19 22:39:19

欣赏帮助，我尝试添加保证金 - 右：4％;离开div。似乎没有帮助。我想我需要更好地理解telerik splitter在完成之前如何重新调整大小。 – NullReference

如果你的DIV是与100px的宽度和你添加填充右：从您的宽度20像素那么它的宽度为120像素，所以减去的填充量，当您使用填充左/右。

来源

2012-01-19 22:38:16

是这个排序后的事情吗？

jsfiddle

左右DIV之间的空格可以用“缘左”的右div的类（更多保证金给予更多的空白空间）来改变。

来源

2012-01-19 22:40:26 Dave

为了解决这个问题，正如其他人指出的那样，由于box model的原因，您需要从元素的宽度中减去填充值。填充是计入用户代理内的元素大小的计算。

CSS3增加了box-sizing属性，它可以让你避免默认盒模型渲染，而是指示它包括内填充元素，充分履行指定的宽度和高度：

/*Property without vendor prefixes*/ box-sizing:border-box;

见这篇文章：http://www.css3.info/preview/box-sizing/

或者从spec本身：

边框此元素上的指定宽度和高度（以及相应的最小/最大属性）确定元素的边框。也就是说，在元素上指定的任何填充或边框都会在此指定的宽度和高度内进行布局和绘制。内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。由于内容宽度和高度不能为负（[CSS21]，第10.2节），因此计算结果为0.

来源

2012-01-20 02:34:20

如何添加保证金而不将内容推出屏幕？

回答

相关问题