CSS3是否可以使div 50px小于100%?[重复]

逆天 · 04月07日

div在纯CSS中,能否使50px小于100%?我希望<div>小于100%仅50px。我不需要任何JavaScript。

CSSHTML
回答(6)
时间
J
Jim斯丁
6 · 2020-04-07 11:22:02

是的你可以。无需使用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

5 · 2020-04-07 11:22:02

另一种选择是绝对定位。

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

小提琴

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

J
Jim
4 · 2020-04-07 11:22:02

jsFiddle

使用显示blockmargindisplay: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>
J
Jim
3 · 2020-04-07 11:22:02

是的,我们可以通过

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

谢谢

神奇
2 · 2020-04-07 11:22:02

我的解决方案可以使用和不使用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

神无
1 · 2020-04-07 11:22:02

一个DIV自动进行其父的宽度。因此,无需定义任何width通常,可以这样简单地写:

div{
    margin-right:50px;
}

检查这个小提琴

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序