CSSでdivの最大高さを設定する方法-CSSチュートリアル-php.cn

CSSでdivの最大高さを設定する方法

青灯夜游

リリース： 2021-11-09 15:41:26

オリジナル

4779 人が閲覧しました

CSS では、max-height 属性を使用して div の最大高さを設定できます。この属性の機能は、要素の最大高さを設定することです。追加する必要があるのは、「div{max」だけです-height:maximum height value" を div 要素に追加します。;}" スタイルで十分です。

CSSでdivの最大高さを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、max-height 属性を使用して div の最大高さを設定できます。

max-height 属性は、要素の最大高さを設定します。注: max-height プロパティには、パディング、境界線、またはマージンは含まれません。

例:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				border: 1px solid red;
				margin-bottom: 20px;
			}
			.box1{
				overflow: hidden;
			}
			.box2{
				max-height: 50px;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div class="box1">
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,</div>
		<div class="box2">
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,
			测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,测试代码,</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでdivの最大高さを設定する方法