Question

所以，我有一个div，我想占用浏览器的整个宽度，每边都是-40px，

我的想法是

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

我不想使用width: xx%，因为我无法控制它。

<小时/> 的更新
好的，它是http://jsfiddle.net/ApcLv/

但现在我的问题是：

我如何让这个居中？

Answer 1

将其包裹在另一个<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>

Answer 2

在div中有一个div ...外部div可以是100％宽，40px填充，内部div也可以是100％宽...这将占用内部div的宽度 - 40px填充。：）

Answer 3

简单

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

..将创建一个占用所有可用水平空间的DIV，每侧减去40px。

除非另有说明，否则块级元素始终使用其所有可用的水平空间。因此，BODY元素每侧恰好为40px的div将始终居中。不需要包装来实现这一目标。

负面利润以“缩小”一个div

3 个答案: