CSS学习--多列布局

多列布局

Multi-column Layout

body{ 
	width: 100%;
	height: 100%;
	margin: 0; 
}
header{ 
	width: 100%;
	height: 30vh;
	background-color: powderblue;
}
#content{
	width: calc(100% - 40px);
	height: 70vh;
	column-count: 3;
	column-width: calc(100% / 3 - 10px);
	column-gap: 10px;
	column-rule-width: medium;
	line-height: 30px;
	padding: 50px 20px;
}

<header></header>
<div id="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, deserunt ipsam architecto quisquam ea sunt voluptatum. Debitis fuga ex cupiditate provident ad odio voluptatibus distinctio, obcaecati numquam magnam repellat sapiente?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus mollitia vitae ad, fugit, ea perspiciatis, obcaecati animi labore sequi sint esse! Ratione dolore quae, fugiat optio quidem voluptate recusandae soluta.Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, aliquam corrupti voluptates amet odit veritatis tempore perferendis nobis consequatur earum deleniti tempora totam quasi incidunt rerum quod eos? Dolores, labore.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea nihil beatae, ab cumque quidem eligendi. Adipisci, iusto. Sint at quae totam nihil est sit numquam dolores, excepturi quibusdam tenetur facilis?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias architecto quas repellendus rerum quasi deserunt soluta? Eveniet inventore maiores, at, iure reiciendis repudiandae aliquid nemo dicta et distinctio, neque totam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illum quis dicta quam obcaecati quidem debitis blanditiis aliquam? Ea fugiat consequuntur laborum repudiandae cumque quidem omnis quo possimus ab tempore.Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, libero praesentium? Tempora consequuntur laudantium soluta, magni accusamus eaque sed magnam saepe, natus earum repellat! Provident reiciendis et cum sed delectus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure dolore laudantium rerum esse illo, similique totam alias sint accusamus necessitatibus numquam molestiae eveniet odit! Tempore cum quis explicabo repudiandae similique!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptas, pariatur maiores quaerat amet non maxime accusamus veniam ipsum eaque iste facere ratione veritatis perspiciatis, accusantium animi atque doloremque eum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt pariatur nobis nulla facilis delectus dolorem voluptatibus odio? Beatae nihil minima necessitatibus incidunt explicabo, perferendis voluptas! Iure doloremque corporis beatae et?
</div>

column-count

描述元素的列数。

column-count: auto | <number>;

column-width

设置在多列布局的理想列的宽度。如果容器的宽度小于指定的值，则单列的宽度将小于声明的列的宽度。

column-width: auto | <length>;

column-gap

设置（列之间）的间隙

column-gap: normal | <length> | <percentage>;

column-rule

多列布局列之间绘制的线。

column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>;

flex

body{ 
	width: 100%;
	height: 100%;
	margin: 0; 
}
header{ 
	width: 100%;
	height: 30vh;
	background-color: powderblue;
}
#content{ 
	width: 100%;
	height: 70vh;
	display: flex; 
}
#left{ 
	width: 30vw;
	height: 100%;
	background-color: blanchedalmond; 
}
#main{ 
	width: 70vw;
	height: 100%;
	background-color: cornsilk; 
}

<header></header>
<div id="content">
	<div id="left"></div>
	<div id="main"></div>
</div>

grid

body{ 
	width: 100%;
	height: 100%;
	margin: 0; 
}
header{ 
	width: 100%;
	height: 30vh;
	background-color: powderblue;
}
#content{ 
	display: grid;
	grid-template-rows: 70vh;
	grid-template-columns: 30vw 1fr; 
}
#left{ background-color: darkcyan; }
#main{ background-color: darksalmon; }

<header></header>
<div id="content">
	<div id="left"></div>
	<div id="main"></div>
</div>

float

left左浮动

right右上浮动，

中间设置左右margin

body{ 
	width: 100%;
	height: 100%;
	margin: 0; 
}
header{ 
	width: 100%;
	height: 30vh;
	background-color: powderblue;
}
#content{ 
	width: 100%;
	height: 70vh; 
}
#left{ 
	float: left;
	width: 20vw;
	height: 100%;
	background-color: yellowgreen;
}
#right{
	float: right;
	width: 20vw;
	height: 100%; 
	margin-top: -70vh;
	background-color: thistle; 
}
#main{ 
	margin: 0 20vw 0 20vw;
	height: 100%;
	background-color: tan; 
}

<header></header>
<div id="content">
	<div id="left"></div>
	<div id="main"></div>
	<div id="right"></div>
</div>

多列都左浮动，依次排列

body{ 
	width: 100%;
	height: 100%;
	margin: 0; 
}
header{ 
	width: 100%;
	height: 30vh;
	background-color: powderblue;
}
#content{ 
	width: 100%;
	height: 70vh; 
}
#left{ 
	float: left;
	width: 20vw;
	height: 70vh;
	background-color: dodgerblue; 
}
#main{ 
	float: left;
	width: 60vw;
	height: 70vh;
	background-color: slateblue; 
}
#right{ 
	float: left;
	width: calc(100% - 20vw - 60vw); 
	height: 70vh;
	background-color: steelblue; 
}

<header></header>
<div id="content">
	<div id="left"></div>
	<div id="main"></div>
	<div id="right"></div>
</div>