CSS3問題與框寬度100％

我有問題顯示一些框CSS3，其中寬度設置爲100％，但並沒有一路走來，我敢肯定我犯了一個錯誤的地方，但我'米不知道在哪裏:)。CSS3問題與框寬度100％

你會在HTML代碼和CSS看到有兩個盒子：「盒子」和「Boxgray」

盒子DIV去一路100％，但boxgray是不是...我希望boxgray的寬度相同。

這裏是我的代碼的鏈接：

感謝

<div class="box" style="background-color:#DDDDDD;background-image:-webkit-linear-gradient(top, #FFFFFF 5%, #F0F0FF 70%, #E3E7F7 100%);"> 
     <h1>Download Our Software</h1> 

     Download Our Software 

    </div> 

    <div class="boxgray" style="width:283px; height:180px;"> 
     <h2><img src="images/windows.png" alt="Download for Windows"> 
      <a href="Install.exe" onclick="javascript: pageTracker._trackPageview('download.kit.Windows');" >Windows Installer</a></h2> 
     No requirements. 
    </div> 

    <div class="boxgray" style="width:283px; height:180px;"> 
     <h2><img src="images/linux.png" alt="Download for Linux"> 
      <a href="Install.jar" onclick="javascript: pageTracker._trackPageview('download.kit.Linux');" >Linux</a></h2> 
     Java 1.6 or later required. 
    </div> 

    <div class="boxgray" style="width:283px; height:180px;"> 
     <h2><img src="images/mac.png" alt="Download for Mac"> 
      <a href="InstallMac.dmg" onclick="javascript: pageTracker._trackPageview('download.kit.mac');" >Mac</a></h2> 
     <small>On MacOS 10.8 you have to set in System Preferences/Security & Privacy/Allow Applications from Anywhere. We are working to fix this issue.</small> 
    </div> 

    <div class="box" style="width:100%"> 
     <h2>Alternative Download</h2> 
     For all platforms you can download a <a href="asd.zip" onclick="javascript: pageTracker._trackPageview('download.kit.zip');" >zip package</a>. 
     Java 1.6 or later is required. 
     <p> 
     In case of problems with the downloaded package or any issue with the software please <a href="support.html">let us know</a>. 
     asdasdasdasdasd 

     <p> 
     <h2>Connect asdasdasd</h2> 
     asdasdasdasdasdasdasdasdasdasdasd 
     In this cases please <a href="support.html">write us</a>. 


    </div>

來源

2013-03-18 user2143407

嘗試修復的box像寬度：

.box{ 
    width: 1024px; 
}

，通常它的工作原理。

來源

2013-03-18 08:43:40

，但你給內嵌樣式您div.boxGray

<div class="boxgray" style="width:283px; height:180px;">

要麼刪除inline width或將其設置爲100%;

即爲此

<div class="boxgray" style="width:100%; height:180px;"> 
    <!--width changed to 100% -->

或本

<div class="boxgray" style="height:180px;"> 
    <!--width removed, as .boxGray class contains 100% width already -->

看到這個fiddle

更新：

所以你要調整你的div.boxGray在單行，就可以給他們，一個較小的寬度，這樣，結合寬度l三個.boxGray應該小於或等於它們的父包裝。什麼？但你沒有這些小浮動div的父包裝！然後提供一個。

看到此更新fiddle

來源

2013-03-18 08:48:57

如果我將它設置爲這樣我將有一個盒子100％寬度....我想要3盒....並覆蓋100％的寬度....任何想法？我試圖增加填充，但最後一個盒子跳到其他2個盒子下面:( – user2143407 2013-03-18 08:53:25

你的意思是說，你有一個div裏面有3個div？而且你想劃分它們之間的總水平寬度嗎？或者你只需要div有100％的寬度？在後面的情況下，你可以有任意多的100％寬度的容器，只要你願意！ – 2013-03-18 08:56:09

不....我的意思是...問題是，我的箱子....不要覆蓋100％的寬度（所有3個都必須覆蓋100％......每個33％......看看我的初稿：http：//jsfiddle.net/gEtp6/2/ 問題是3盒（boxgray）與上面的盒子沒有相同的寬度.... – user2143407 2013-03-18 09:15:15

盒子DIV去一路100％，但boxgray是不是...我想寬度爲boxgray相同。

刪除內聯CSS寬度並且.boxgray類將爲100％。

<div class="boxgray" style="width:283px; height:180px;">

來源

2013-03-18 08:50:06 Scott

編輯

，如果你希望兩個頁眉和頁腳框以100％的寬度，和三個白框要寬各爲33％，那麼你可以做這樣的：

div.box { 
    width: calc(100% - 32px); 
} 
div.boxgray { 
    width: calc(33.3% - 32px); 
}

演示：http://jsfiddle.net/LNAhL/2/

32PX從（5像素餘量+ 10px的填充+ 1像素b中算出訂單）* 2個邊

最後一個因子評分：你gray-background的div被稱爲box，而你的white-background的div被稱爲boxgray ...？

來源

2013-03-18 08:50:51

nope .... graybackround boxgray和白色背景只是框....再一次這個解決方案它搞砸了更多的盒子:) – user2143407 2013-03-18 09:06:18

nope ...用螢火蟲打開它們：/// boxgray是白色的，盒子是灰色的。 Firefox，你使用哪個瀏覽器，ie8？ – 2013-03-18 09:19:36

Chrome，Firefox，IE測試，結果是一樣的 – user2143407 2013-03-18 09:36:56

在您的HTML中，您將所有boxgray的寬度設置爲283px。只要刪除這個，它應該沒事！

來源

2013-03-18 08:52:05

CSS3問題與框寬度100％

回答

相關問題