2010-08-18 115 views
1

所以,我有我想占用浏览器的整个宽度,-40px每边一个div,负利润率为“缩水”一个div

我的想法是让

width: 100%; and margin: 0 -40px;然而这不起作用。

我不想使用width: xx%,因为我无法控制这个。


更新
确定了它打算在 http://jsfiddle.net/ApcLv/

,但现在我的问题是:

我如何得到这个为中心?

回答

3

把它包在一个又一个<div>,给家长一个<div>财产width:100%,孩子<div>一个margin:40px;属性:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head > 
    <title >Example</title> 
    <style type="text/css"> 
     #wrapper { 
      width:100%; 
     } 
     #main { 
      margin:40px; 
      background-color:red; 
     } 
    </style> 
</head> 
<body> 

<div id="wrapper"> 
    <div id="main"> 
     This is a test 
    </div> 
</div> 

</body> 
</html> 
+0

这不仅会给左右边界,还会给上边界。所以它需要保证金:0 40px;但油漆点好;) – Sotiris 2010-08-18 12:20:24

0

在div中有一个div ...外部div可以是100%宽度,40px填充,内部div也可以是100%宽度..这将占用内部div的宽度 - 40px填充。 :)

+0

做这种方法将导致100%+ 40px的宽度,因为填充添加到div,而不是减去。 – Hailwood 2010-08-18 12:25:29

0

只需

[..] 
<body> 
<div style="margin: 40px">Blabla</div> 
</body> 
[..] 

..will创建一个DIV占用所有可用的水平空间,每边减去40px。

除非另有说明,块级元素始终使用其所有可用的水平空间。因此,BODY元素的每边正好具有40px的div将始终居中。无需包装来实现这一点。