227

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

4

6 回答 6

291

是的你可以。在不使用 IE 的情况expression()下，您可以在 CSS3 中使用calc().

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、Google Chrome (WebKit) 和 IE9：http ://caniuse.com/calc

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

于 2012-06-19T03:18:53.173 回答
159

DIV自动采用其父级的宽度。所以没有必要定义任何width. 通常会简单地这样写：

div{
    margin-right:50px;
}

检查这个小提琴

于 2012-06-19T04:37:27.853 回答
37

另一种选择是绝对定位。

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

小提琴

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

于 2012-06-19T05:10:09.357 回答
7

我的解决方案有无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; 
}​

演示

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

于 2012-06-19T14:37:50.707 回答
4

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>
于 2013-04-18T02:58:03.713 回答
-4

是的，我们可以通过制作

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

谢谢

于 2012-06-19T09:15:00.423 回答