플로트 효과

I는 top 설정 table-cell 및 vertical-align 속성 설정 display 속성 상자 하위 블록 상자 table에 블록을 함유하고 감싸는 display 속성을 설정하는 단계와 동일한 효과가 있다는 것을 발견했다 해당 상자의 float 속성이 left으로 설정된 경우플로트 효과

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>simulating float</title> 
<style type="text/css"> 

#container { 
background-color: darkgrey; 
margin: 10px; 
padding: 10px; 
height: 240px; 
display: table; 
} 

.box { 
margin: 5px; 
width: 240px; 
height: 240px; 
background-color: grey; 
} 

.float { 
display: table-cell; 
vertical-align: top; 
} 

</style> 
</head> 
<body> 

<div id="container"> 

<div class="float"> 
<div class="box"></div> 
</div> 

<div class="float"> 
<div class="box"></div> 
</div> 

<div class="float"> 
<div class="box"></div> 
</div> 

</div> 
</body> 
</html>

누구에게 설명 할 수 있습니까? 감사.

출처

2013-09-21 user2227119

이것은 매우 유용한 부작용을 가지고 있습니다 : 'float' 속성이 사용될 때 발생하는 것처럼 뷰포트의 크기를 재조정 할 때 상자가 떠 다니지 않습니다. – user2227119

float CSS 속성은 일반 흐름에서 요소를 가져 와서 컨테이너의 왼쪽 또는 오른쪽을 따라 배치해야하며 텍스트 및 인라인 요소가 그 주위를 둘러 쌀 수 있도록 지정합니다.

또한 display:table-cell은 HTML 태그처럼 동작합니다. vertical-align:top 적절성은 요소를 전체 선의 맨 위에 정렬하거나 셀의 위쪽 패딩 가장자리를 행의 맨 위에 맞 춥니 다. 그래서

.float { display: table-cell; vertical-align: top; }

그것은 단지 float:left이 있다면처럼 보인다.

이것이 CSS를 더 잘 이해하는 데 도움이되기를 바랍니다.

출처

2013-09-21 19:25:10 asertym

플로트 효과

답변

관련 문제