Heim > Web-Frontend > HTML-Tutorial > 用CSS实现等高列_html/css_WEB-ITnose

用CSS实现等高列_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:40:59
Original
939 Leute haben es durchsucht

需求

有3个水平方向的块,块的内容有多有少。在不设置高度的情况下,高度不等。现要求3个水平块都有相同的高度,高度等于最高的块的高度。

Method 1

使用table布局。在table中,在同一行中的单元格是等高的。

Method 2

如下:

https://jsfiddle.net/maydayuiui/0rydnyv7/

通过设置padding-bottom把块的高度撑开,使得他们远远大于内容的高度。再设置margin-bottom,在没有为块设置高度的情况下,计算块的高度时,会使用padding-bottom margin-bottom加上内容高度的方式计算高度。把margin-bottom设置成负值,绝对值等于padding-bottom。这样计算出的高度就等于内容的高度。这时最高的块的高度决定了父元素的高度。子元素的显示效果则包括padding的效果。最后再为父元素设置overflow: hidden把多于最高子元素高度的部分隐藏掉即可实现。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage