CSS3中可以使div小於100％嗎？

219

是否可以在純CSS中製作一個小於100％的012px50px？我希望<div>只比100％少50px。我不想要任何JavaScript。CSS3中可以使div小於100％嗎？

來源

2012-06-19 Derek 朕會功夫

@hakre - 你的鏈接在CSS中，這是在CSS3中。 –

CSS不是CSS3不是CSS不CSS不是CSS不是...？如果您明確要求僅在版本3中制定的CSS功能，請詢問它（通常不是CSS） - 是的，您的問題主體與此處的標題不同，所以請不要責怪我） – hakre

在問題標題下方的正文處。你應該使用body來使CSS3問題變得明確（當我們說話時請說出CSS3或CSS3 +） – hakre

274

是的，你可以。如果不使用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級主要的瀏覽器：火狐，谷歌瀏覽器（WebKit的），和IE9：http://caniuse.com/calc

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

來源

2012-06-19 03:18:53

+40

問題是a）問題不清楚寬度與高度和b ）自我回答不是最好的答案。對於寬度，sandeep更好，高度，gilly3's。目前一些重要的瀏覽器統計信息不支持OP的答案。（IE7/8） – shannon

+16

BTW：非前綴版本應該在前綴版本之後，而不是之前。請參閱https://developer.mozilla.org/Writing_Forward_Compatible_Websites另外，根據我的經驗，大量的calc（）情況可以用'box-sizing'替代。 – luiscubal

「expression（）」會導致問題，因爲瀏覽器會重新計算鼠標moviment每個像素上的函數（在表達式中），這會影響處理器的使用。在這種情況下（與計算）這發生？ – 19WAS85

159

一個DIV自動進行其父的寬度。所以沒有必要定義任何width。通常只會寫這樣的：

div{ 
    margin-right:50px; 
}

入住這fiddle

來源

2012-06-19 04:37:27 sandeep

+11

[this]（http://jsfiddle.net/Nw3yd/3/）vs [this]（http://jsfiddle.net/Nw3yd/4/）怎麼樣？ – Chango

@Chango - 當你調整窗口大小時，[[]]（http://jsfiddle.net/Nw3yd/4/）真是太神奇了。 –

@Chango可能是你想要達到http://jsfiddle.net/Nw3yd/6/ – sandeep

另一種選擇是絕對定位。

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

fiddle

但是，Sandeep的解決方案是，你通常應該使用一個。只需避免過度使用float。這可以防止元素自然地填充其容器。

來源

2012-06-19 05:10:09 gilly3

-4

是的，我們可以通過使

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

感謝

來源

2012-06-19 09:15:00 Deepranshu

爲什麼你定義寬度：auto; – sandeep

除了'width：auto;'這個和sandeep的一樣，它沒有任何效果。你的答案根本沒有增加任何價值。不要發佈你自己的sandeep版本的答案，你應該提高sandeep的答案。 –

我的解決方案可與不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

兼容性：
火狐3.6，Safari瀏覽器5，鉻6，歌劇10，IE 9

來源

2012-06-19 14:37:50 Puyol

你的方法中的div仍然佔據着屏幕的所有寬度，所以如果你放置其中的兩個，你不能讓它們浮動在另一個之上。 – Chango

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-18 02:58:03

CSS3中可以使div小於100％嗎？

回答

相關問題