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

Question

是否有可能div在纯CSS 中使50px小于100%？我希望<div>它只比50%小于100%.我不想要任何JavaScript.

Answer 1

是的你可以.不使用IE expression(),您可以使用CSS3在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,谷歌浏览器(WebKit)和IE9:http://caniuse.com/calc

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

Answer 2

一个DIV自动进行其父的宽度.所以没有必要定义任何width.通常只会这样写:

div{
    margin-right:50px;
}

检查这个小提琴

Answer 3

另一种选择是绝对定位.

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

小提琴

但是,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; 
}?

演示

兼容性:
Firefox 3.6,Safari 5,Chrome 6,Opera 10,IE 9