Div 100％宽度和边距 [英] Div 100% width and a margin

问题描述

我试图把一个左右边距也是100％宽度的东西。我用的是箱尺寸方法，我希望将使它说100％inclduing保证金，但它确实100％，加上保证金，这意味着我有一个垂直滚动条。

它在这里展示：

的http：// jsbin .com / xomocitono / 1

 < div id =main> 
 Test 
< / div> 
 
 #main {width：100％; margin-left：100px; margin-right：100px;背景：红色;} 
  

在我自己的特殊情况下，我不能使用以下：

1. 填充代替，因为即使它的工作原理我多么希望（以100％的宽度而言）填充覆盖之下，而保证金的链接




2. CSS Calc（它不是我希望的跨浏览器）

p>谁能帮助解释一下，如果我有任何其他选项吗？

詹姆斯

解决方案

在使用 margin-left 和 margin-right 时，您不必提供宽度。

试试这个：

  #main 
 {
保证金左：10％; 
 margin-right：10％; 
 background：red; 
} 
  

I'm trying to put a left and right margin on something that is also 100% width. I was using the box-sizing method which I was hoping would make it say 100% inclduing the margin but it does 100% PLUS the margin, meaning I have a vertical scroll bar.

It's demonstrated here:

http://jsbin.com/xomocitono/1

  <div id="main">
    Test
  </div>

#main {width: 100%; margin-left: 100px; margin-right: 100px; background: red;}

In my own particular situation I can't use the following:

1. Padding instead, because even though it works how I want (in terms of 100% width) the padding covers the links below whereas the margin doesn't.

2. CSS Calc (it isn't as cross browser as I was hoping)

3. Fixed width #main, because I want it to be fluid, just with a margin either side.

Can anyone help explain if I have any other options please?

James

解决方案

You don't have to give width when you are using margin-left and margin-right.

Try This:

#main
{
 margin-left: 10%;
 margin-right: 10%;
 background: red;
}

这篇关于Div 100％宽度和边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！