2014-02-21 5 views
0

3 개의 플로팅 된 div가 있습니다. 응답 한대로 동작하도록 설정되었습니다. Dreamweaver의 라이브 뷰에서는 제대로 작동하지만 브라우저에서 테스트 할 때는 작동하지 않습니다. 다음은 숫자로 시작하는 클래스 이름을 허용하지 않는 바이올린 http://jsfiddle.net/pa5Ey/Divs가 브라우저에서 반응하지 않음

CSS

#maincontentInner{ 
    max-width:1170px; 
    position:relative; 
    margin:0 auto; 
    background-color:#FFF; 
    overflow:hidden; 
    border-right-width: 1px; 
    border-left-width: 1px; 
    border-right-style: solid; 
    border-left-style: solid; 
    border-right-color: #999999; 
    border-left-color: #999999; 
    padding-top:50px; 
    } 

.3col { 
    width: 32.26%; 
    margin-right:1.6%; 
    float:left; 
    text-align:center; 
} 

및 마크 업

<div class="3col" style="margin-left:1.9%"> 
     Some Text Here<br /> 
     Some Text Here<br /> 
     Some Text Here<br /> 
     Some Text Here<br /> 
    </div> 

    <div class="3col"> 
     Some Text Here<br /> 
     Some Text Here<br /> 
     Some Text Here<br /> 
     Some Text Here<br /> 
    </div> 

    <div class="3col"> 
     Some Text Here<br /> 
     Some Text Here<br /> 
     Some Text Here<br /> 
     Some Text Here<br /> 
    </div> 
    <div class="clearfix"/> 

    </div><!-- End maincontentInner --> 
+1

당신은 "반응 적 행동"에 의해 무엇을 의미합니까? 예상되는 행동에 대해 좀 더 정확하게 생각해 주시겠습니까? – ltalhouarne

+0

사과. broswer 크기 조정을 사용하여 div가 구부러 지도록하고 결과적으로 서로 쌓아두기를 바랍니다. 이전에는이 ​​방법으로 성공했지만이 인스턴스에는 성공하지 못했습니다. – Greg

답변

2

CSS입니다. 첫 번째 문자는 문자 여야합니다.

Updated jsfiddle

.threecol { 
    width: 32%; 
    margin-right:1%; 
    float:left; 
    text-align:center; 
} 
0

너비와 마진이 소수 작동하지 않습니다 그래서 올바른 코드는 다음과 같습니다

.threecol { 
    width: 32%; 
    margin-right:1%; 
} 
+0

실제로 계산 된 값이 백분율의 절대 값과 다른 경우 백분율로 소수점 이하 자리를 사용할 수 있습니다. 즉 200px의 32.5 %는 65px이지만 200px의 32 %는 64px입니다. 32.5 %는이 경우 존경을받을 것이며 32 %와 다른 가치를 갖게됩니다. 브라우저는 절반 픽셀 차이와 같이 논리적으로 표시 할 수없는 값을 반올림하는 경향이 있습니다. 백분율로 소수점을 사용할 수 있습니다. – Lazerblade

관련 문제