제안 된 CSS3 "소프트 플로팅"속성이 있습니까?

Question

요소의 부동과 관련하여 html5 또는 CSS3 사양에 계획된 것이 있으면 누구나 아이디어를 갖고 있습니까?

나는이 질문에 "소프트 부동"나는 속성 CSS 다음과 같은 것을 요소의 그룹을주는 아이디어에 관심이로 ...

경우 상상을 제목 당신은 이미지의 스타일리스트 .. .

<ul> 
<li><img src='1.jpg'></li> 
<li><img src='2.jpg'></li> 
<li><img src='3.jpg'></li> 
<li><img src='4.jpg'></li> 
<li><img src='5.jpg'></li> 
<li><img src='6.jpg'></li> 
<li><img src='7.jpg'></li> 
<li><img src='8.jpg'></li> 
<li><img src='9.jpg'></li> 
</ul> 

과 함께 스타일 -

ul{ 
list-style:none; 
} 
li{ 
float:left; 
} 

는 이미지가 상당히 랜덤하다 높이의 50 내지 100 픽셀 높이라고 생각.

현재이 왼쪽으로 이동하면 하나 이상의 이미지가 늘어나서 나머지 수레가 보이지 않게됩니다 (시각적으로는 브라우저 렌더링과 관련하여 실제로는 잘못된 것은 아닙니다).

플로팅 된 요소 컨테이너의 오른쪽 범위에서 밀어 낸 요소가 효과적으로 캐리지가 반환되거나 지워지는 일종의 "소프트 플로팅"에 대한 제안이나 특성이 있는지 궁금합니다. 앞에있는 모든 떠 다니는 요소의 아래쪽 가장자리를 지난다.

와우. 그 중 어떤 것도 말이 틀린가 ...?

Answer 1

나는 당신이 뭘하고 있는지 알고 있다고 생각합니다.

원하는 레이아웃이 이미 display: inline-block에 의해 달성되었다고 생각합니다. http://jsfiddle.net/pauldwaite/6eh23/

이것이 내가하는 일이 아니라면, 내가 알고있는 한,이 줄에는 제안이 없습니다.

그러나 새 사양을 자세히 따르지는 않습니다. 이런 일이 있다면, 나는 다음과 같은 CSS3 모듈 중 하나가 될 것이라고 생각 :

• Template Layout
• Grid Positioning
• Flexible Box Layout

당신은 다른 사양-에서 찾아 볼 수 있습니다 CSS "현재 작업"페이지의 진행 상황 :

• http://www.w3.org/Style/CSS/current-work

Answer 2

는 다음과 같은 예를 생각해

HTML :

<div> 
    <!-- Images of varying heights --> 
    <img src="[location]" alt="" /> 
</div> 

CSS :

img { vertical-align:middle; } 

이 '부드러운 부동'(내가 생각하는)의 효과를 얻을 것입니다. 이미지가 아닌 다른 HTML이 필요한 경우 HTML에 따라 문제가 발생할 수 있습니다.필자는 인라인 요소를 더 추가 할 수 있다고 생각하지만 블록 요소를 사용하면 플로팅하지 않으면 원래의 문제가 발생합니다.

부유 요소의 특성과 어떻게 행동해야하는지에 따라 브라우저에서 소프트 플로팅 아이디어를 계산하는 것이 어려울 것이라고 생각합니다. 플로팅 된 요소의 높이를 지정하지 않으면 IIRC는 런타임에 요소가 렌더링 된 후에 만 ​​알 수 있습니다. 자바 스크립트를 사용하여 높이/너비를 계산합니다.

일반적으로 페이지에서 사용되는 이미지의 가장 큰 높이를 알고 플로트 된 요소의 높이를 그 높이로 설정하는 것이 가장 좋습니다. 요소의 너비도 동일합니다. 나는 소프트 플로팅이 좋은 생각인지 모르겠습니다.