CSS의 table-cell 속성을 활용한 왼쪽 이미지와 오른쪽 텍스트의 레이아웃 방법에 대한 예제 소개

가로 메뉴의 스타일 작성과 같이 어떤 경우에는 table-cell을 사용하는 것이 float보다 더 간단하고 효과적입니다. 여기서는 table-cell 속성을 사용하는 레이아웃 방법에 대한 자세한 설명을 살펴보겠습니다. 왼쪽 이미지와 오른쪽 텍스트를 구현하는 CSS:

요소를 가로로 배열할 때는 일반적으로 float, display:inline-block 등의 방법을 사용합니다. table-cell을 이용해서 간단하게 구현할 수도 있습니다.
가로형 배열을 만들 때 table-cell을 사용하면 3가지 장점이 있는 것 같아요(하하하, 좀 억울하네요)

1. 및 명확함: 둘 다 사용할 수 있습니다.
2. 세로 센터링도 허용됩니다.
3. 테두리가 밀려나지 않습니다.
clear:both는 display:inline-block으로 대체될 수 있습니다. display:table-cell에서 가장 중요한 점은 수직으로 중앙에 배치하는 것입니다.
또한 반응형 디자인에서는 패딩과 테두리로 인해 스타일이 테두리 밖으로 밀려나지 않습니다. 더 이상 너비를 계산하거나 상자 크기를 사용하지 않아도 됩니다.

테이블셀로 만든 가로배치
먼저 테이블셀의 기본적인 글쓰기 방법을 소개하겠습니다

예를 들어 일반 웹사이트에 나타날 왼쪽 배열

CSS 부분 :

.box{width:60%; margin:60px auto 0; padding:20px; background:#f5f5f5;}   
.content{display:table-cell; *display:inline-block;}

위 내용은 CSS의 table-cell 속성을 활용한 왼쪽 이미지와 오른쪽 텍스트의 레이아웃 방법에 대한 예제 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!