CSS多列布局

最新推荐文章于 2025-06-11 14:55:28 发布

原创最新推荐文章于 2025-06-11 14:55:28 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

web 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一位父亲的形象特点和他的兴趣爱好，包括篮球和唱歌等。通过具体的例子描绘了一个充满活力且多才多艺的父亲形象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

index.html

    <h1>我的爸爸

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS3多列布局</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- <h1>我的爸爸</h1> -->

<div>
    <h1>我的爸爸</h1>
    <h3>第一段内容</h3>
	<p>我的爸爸刚刚30出头，他的面容，要比他的年龄，成熟稳重的多，但是，他可没有苍老憔悴哦！爸爸的身高有180公分，体重75公斤，是个标准的型男身材。如果，我说我爸爸是个大帅哥，可一点也没有撒谎呢！</p>
	<h3>第二段内容</h3>
	<p>爸爸不仅，打篮球a非常的棒，他的歌声，那也是非常的了得。从我记事的时候开始，每当过年的时候，我们家的亲戚，包括七大姑八大姨，都会团聚在一起，吃一顿团圆饭。在吃过团圆饭之后，那场面才叫一个劲爆热闹。大家都围坐在一起，开始K歌。就是因为，爸爸喜欢唱歌，所以，我们家就置办了，音响的整套设备。所以，大家也就不用去KTV，坐在家里就可以，比赛唱歌了。大家，你唱一曲，我唱一首，不唱到天亮，誓不罢休。</p>
	<h3>第三段内容</h3>
	<p>在我们小区里，就组建了一个篮球队，爸爸，可是他那队里的佼佼者呢！每当，我们小区和其他小区，有篮球比赛的时候，永远都不会少了爸爸的身影。爸爸可是个投三分球的高手。</p>
	<h3>第四段内容</h3>
	<p>爸爸剪了当下最流行的一款发式——毛寸。怎么样？说到这里，我的爸爸是不是一个十足的大帅哥？呵呵，我可是这么认为的。</p>
	<h3>第五段内容</h3>
	<p>爸爸长了一张国字脸，脸上的五官，分布得特别的整齐、匀称。两道乌黑浓密的眉毛，一对儿亮晶晶闪闪发光的大眼睛，两个眼珠黑白分明，还是双眼皮。那高高的鼻梁，坚实而挺拔。长了一个不大不小，刚刚合适的嘴。</p>
</div>

</body>
</html>

style.css

@charset "utf-8";
div{
	/*-moz-columns: auto 3;*/
	/*150是最小列宽*/
	/*-moz-columns:150px 3;*/
	/*如果没有设置列数，却设置了每列多少宽度，那么会自动设置列数*/
	-webkit-column-width:150px;
	-webkit-column-count:3;
	/*栏间距*/
	-webkit-column-gap:50px;
	/*栏之间分割线，自适应，与边框用法一样*/
	-webkit-column-rule:2px dashed gray;



}
h1{
	text-align:center;
	-webkit-column-span:all;
}

总结：