2010-01-26 2 views
4

WPF에서는 너비를 별표로 설정하여 나머지 공간을 차지하도록 열 너비를 설정할 수 있습니다. HTML 또는 CSS의 향후 버전에서 비슷한 기능이 있습니까?HTML 또는 CSS의 차기 버전에는 별표가 있습니까?

예 :

<div style="float: left; width: 50px;"> 
    Occupies 50px of the page width 
</div> 
<div style="float: left; width: 1*;"> 
    Occupies 25% of the rest of the page width 
</div> 
<div style="float: left; width: 3*;"> 
    Occupies 75% of the rest of the page width 
</div> 

이 브라우저의 향후 버전에서 구현 될 수 있다면 정말 거기에 웹 개발자를 도움이 될 것이다.

답변

6

비슷한 것을하는 template layout module for CSS 3가 있습니다.


편집하지만 당신은 이미 작업을 수행 할 수 있습니다

<div style="padding-left: 50px"> 
    <div style="float: left; width: 50px; margin-left: -50px;"> 
     Occupies 50px of the page width 
    </div> 
    <div style="float: left; width: 25%"> 
     Occupies 25% of the rest of the page width 
    </div> 
    <div style="float: left; width: 75%;"> 
     Occupies 75% of the rest of the page width 
    </div> 
</div> 

추가 padding-leftmargin-left 조정은 100 % 마이너스 50 픽셀 폭의 외부 DIV의 컨텐츠 모델을하는 것입니다.

+0

템플릿 레이아웃 모듈은 정말 약속 같은데 확실하지 않다하지만

그것은, 다음과 같이 일할 수! 당신이 제안하고있는 현재의 해결책은 제 문제를 완벽하게 해결합니다! 감사! – knut

2

이미 HTML에이를 수 있습니다 ...

여기에 단지 HTML에서 작동하도록 조정하여 예입니다.

<div style="float: left; width: 50px;"> 
    Occu- pies 50px of the page width 
</div> 
<div style="margin-left: 50px; width: 100%;"> 
    <div style="float: left; width: 25%"> 
     Occupies 25% of the rest of the page width 
    </div> 
    <div style="float: left; width: 75%;"> 
     Occupies 75% of the rest of the page width 
    </div> 
</div> 
+2

100 % 너비로 만들지는 않겠지 만 50px만큼 오른쪽으로 튀어 나오지 않겠습니까? –

+0

@Charlie Somerville : 추가 조정이 필요하지만 이미 작동합니다. – Gumbo

2

W3C의 CSS 실무 그룹은 별 기능과 동일한 효과에 사용될 수있는 퍼센트 빼기 픽셀 기능에 대한 제안을 수락했습니다. 내가

.fixedCol { 
    width:200px; 
} 
.fluidCol { 
    width:100% minus 200px; 
} 
+0

그들은 이것을'width : calc (100 % - 200px)'로 구현했다. [ref] (https://developer.mozilla.org/en-US/docs/Web/CSS/calc) – mpen