Maison > interface Web > tutoriel HTML > 用CSS实现等高列_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:40:59
original
940 Les gens l'ont consulté

需求

有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把多于最高子元素高度的部分隐藏掉即可实现。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal