DOM 요소 수가 가장 적은 픽셀의 너비가 적은

DOM 요소 수가 가장 적고 이미지가없는 레이아웃을 렌더링하는 순수 CSS 솔루션을 찾으려고합니다. 예를 들어, - 진짜 문제는 사업부를 받고있다DOM 요소 수가 가장 적은 픽셀의 너비가 적은

Desired layout http://oi39.tinypic.com/2mza5ht.jpg

50 % 폭 마이너스 일부 픽셀이 될 수 있습니다 50 % 미만 10px

나는 최선의 노력을 기울여 jsfiddle을 설정했습니다. 이것은 완벽하게 작동하지만, DOM 요소가 적은 것을 기대하고 있습니다.

<div class="main"></div> 
<div class="backHalf"> 
    <div class="backLeft1"></div> 
    <div class="backLeft2"></div> 
    <div class="backLeft3"></div> 
</div> 
<div class="backHalf"> 
    <div class="backRight1"></div> 
    <div class="backRight2"></div> 
    <div class="backRight3"></div> 
</div>

및 CSS :

이

내 HTML입니다

.main, .backHalf div { height: 10px; background-color: #000} 
.backHalf { width: 50%; float:left} 
.backMain { height: 50px; } 
.backLeft1 { margin-right: 10px; } 
.backRight1 { margin-left: 10px; } 
.backLeft2 { margin-right: 20px; } 
.backRight2 { margin-left: 20px; } 
.backLeft3 { margin-right: 30px; } 
.backRight3 { margin-left: 30px; }

그런데, 나는 그것이 많은 적은 DOM 요소가되지 않습니다 더 나은 솔루션이 있는지 확신하지만, 심지어 하나를 잃는 것은 도움이 될 것입니다. 예 : 'backHalf'div 없이도 동일한 결과를 얻을 수 있다면 많은 도움이 될 것입니다.

출처

2013-10-24 Fijjit

dom 요소가 적습니까? 지금은 욕심 내 지마. 괜찮아요. – Ibu

구식 브라우저가 필요 없다면 box-sizing은 친구입니다. –

CSS 전처리 기가 없어도 이것을 할 수 있을지 모르지만 전문가는 아닙니다. . – wootscootinboogie

CSS3의 새로운 기능 calc()을 사용하면 CSS에서 직접 너비 또는 높이를 계산할 수 있습니다. 예 : calc(50% - 10px);

여기까지입니다 : JSFiddle, 꽤 많이 수행되었지만, clear 문제가 있습니다. 어떤 아이디어?

See this reference on MDN

출처

2013-10-24 18:42:26 Pibolo

이것은 아주 좋습니다. 나는 IE8을 지원하기 위해 이상적으로 찾고 있다고 언급 했어야한다 - 나는 많이 묻는다는 것을 알고있다 !!! 그러나, 나는 새로운 브라우저가 겪지 않도록 IE8을위한 약간 다른 템플릿을 제시하기 위해 Mustache를 사용할 것입니다. – Fijjit

그런데 떠 다니는 div를 다시 주문하면 명확한 문제가 사라 지므로 왼쪽/오른쪽/왼쪽/오른쪽/왼쪽/오른쪽으로 시차가 있습니다. – Fijjit

DOM 요소 수가 가장 적은 픽셀의 너비가 적은

답변

관련 문제