是否有可能使一个div 50px小于100%纯CSS?我想让<div>只比100%小50px。我不需要任何JavaScript。
当前回答
是的,你可以。不使用IE的表达式(),你可以在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、谷歌Chrome (WebKit)和IE9: http://caniuse.com/calc
MDN: https://developer.mozilla.org/en/CSS/-moz-calc
其他回答
是的,我们可以通过制造
#custom_div{
width:100%;
margin-right:50px;
}
谢谢
我的解决方案有和没有浮动:左。
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
兼容性: 火狐3.6,Safari 5, Chrome 6, Opera 10, IE 9
另一种选择是绝对定位。
div {
position: absolute;
left: 0;
right: 50px;
}
小提琴
但是,桑迪普的解决方案是你通常应该使用的。只是 避免过度使用浮子。这阻止了元素自然地填充容器。
是的,你可以。不使用IE的表达式(),你可以在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、谷歌Chrome (WebKit)和IE9: http://caniuse.com/calc
MDN: https://developer.mozilla.org/en/CSS/-moz-calc
DIV会自动获取父DIV的宽度。因此,不需要定义任何宽度。通常是这样写的:
div{
margin-right:50px;
}
检查这把小提琴
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?