상자 너비가있는 CSS3 문제

Question

너비가 100 %로 설정된 일부 상자 CSS3을 표시하는 데 문제가 있습니다. 그러나 모든 방법으로 이동하지는 않습니다. 어딘가에 실수를 저 지르지 만, 확실하지 않은 m :). 내가 ... "상자"와 "Boxgray"

박스 사업부는 모든 방법을 100 %로 이동하지만 boxgray가되지 않습니다 :

당신이 두 개의 상자가있는 HTML 코드와 CSS에서 볼 수 있습니다 상자 그레이에 대해 너비가 같아 지도록하십시오. 일반적으로

.box{ 
    width: 1024px; 
} 

및 작동 다음은 box처럼의 폭을 해결하기 위해

http://jsfiddle.net/gEtp6/2/

감사

<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> 

Answer 1

시도 : 여기

는 내 코드와 링크입니다 .

Answer 2

하지만 당신은 당신의 div.boxGray

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

에 인라인 스타일을 준 중 하나 inline width를 제거하거나 100%로 설정; 당신이 할 수있는,

은 그래서 당신은 하나의 행에 div.boxGray을 정렬 할 :

즉,이

<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

업데이 트를 참조 할 그 (것)들에게, 더 작은 폭, 이렇게, 결합한 폭의 알루미늄 l 세 개의 .boxGray은 상위 래퍼의 값보다 작거나 같아야합니다. 무엇? 하지만 당신은 작은 부동 divs에 대한 부모 래퍼가 없어! 그 중 하나를 제공하십시오. 내가 boxgray에 대한 동일하게 폭을 원하는 ...

이이 박스 사업부는 모든 방법을 100 %로 이동 fiddle

Answer 3

업데이트를 참조하지만 boxgray 아니다.

인라인 CSS 너비를 제거하면 .boxgray 클래스는 100 %가됩니다.

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

Answer 4

편집

100 % 넓게 두 머리글과 바닥 글 상자를 원하고, 세 개의 흰색 상자가 각각 33 % 넓게 경우, 당신은 그렇게 할 수 있습니다

를

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

데모 : http://jsfiddle.net/LNAhL/2/

32px은 (5px 마진 + 10px 패딩 + 1 픽셀 (B)로부터 산출 주문) * 2 개면

---

마지막으로 문질러서 : 당신의 white-background 된 div가 boxgray라고하면서 gray-background 된 div가 box라고 ...?

Answer 5

HTML에서 모든 상자 회색의 너비를 283px로 설정합니다. 그냥 제거하고 괜찮을 것입니다!