Question

是否可以在纯CSS中使div 50px小于100％？我希望<div>只比50％小于100％。我不想要任何JavaScript。

Answer 1

是的，你可以。如果不使用IE的expression()，您可以使用calc()在CSS3中执行此操作。

div {
    width: 100%;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

演示：http://jsfiddle.net/thirtydot/Nw3yd/66/

这将使您的生活变得更加轻松。它目前在3种主要浏览器中得到支持：Firefox，谷歌浏览器（WebKit）和IE9：http://caniuse.com/calc

MDN：https://developer.mozilla.org/en/CSS/-moz-calc

Answer 2

DIV 会自动获取其父级的宽度。因此，无需定义任何width。通常只会这样写：

div{
    margin-right:50px;
}

选中此fiddle

Answer 3

另一种选择是绝对定位。

div {
    position: absolute;
    left: 0;
    right: 50px;
}

fiddle

但是，Sandeep的解决方案是您应该经常使用的解决方案。只是避免过度使用float。这可以防止元素自然地填充容器。

Answer 4

我的解决方案可以使用和不使用float: left。

HTML：

<div></div>

的CSS：

div {
    height: 20px;
    background: black;
    float: left;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
    background-clip: content-box; 
}

Demo

兼容性：
Firefox 3.6，Safari 5，Chrome 6，Opera 10，IE 9

Answer 5

jsFiddle

使用展示广告block和margin。 display:block未与定义的height / width合并时，会尝试填充其父级。

header {
    width:100%;
    background:#d0d0d0;
    height:100%;
}
h1 {
    display:block;
    border:#000 solid 1px;
    margin:0 50px 0 0;
    height:100px;
}
<header>
    <h1></h1>
</header>

Answer 6

是的，我们可以通过制作

来实现

#custom_div{
 width:100%;
 margin-right:50px;
 }

由于

是否有可能在CSS3中使div 50px小于100％？

6 个答案: