gdk

导航

网格布局

------------恢复内容开始------------

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.wrapper {
				display: grid;
				grid-template-columns:70% 30% ;
			}

			.wrapper>div {
				background-color: #eee;
				padding: 1rem;
			}

			.wrapper>diV:nth-child(odd) {
				background-color: #ddd;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div>lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
				quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
				necessitatibus alias et quofugit，nulla doloribus explicabo asperiores optio soluta non!Reiciendis ipsam
				totam laudantium doloribus inventoreiste hic atque necessitatibus id labore libero dicta voluptate
				cum，iure provident nesciunt enim maxime distinctiovelit tempora! A cumque maxime voluptatem iste vero
				commodi， consequatur at veritatis，facilis minus quibusdamperspiciatis rem! Ad.R</div>
			<div>
				lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
				quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
			</div>
			<div>lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
				quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
				necessitatibus alias et quofugit，nulla doloribus explicabo asperiores optio soluta non!Reiciendis ipsam
				totam laudantium doloribus inventoreiste hic atque necessitatibus id labore libero dicta voluptate
				cum，iure provident nesciunt enim maxime distinctiovelit tempora! A cumque maxime voluptatem iste vero
				commodi， consequatur at veritatis，facilis minus quibusdamperspiciatis rem! Ad.R</div>
			<div>
				lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
				quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
			</div>
			<div>lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
				quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
				necessitatibus alias et quofugit，nulla doloribus explicabo asperiores optio soluta non!Reiciendis ipsam
				totam laudantium doloribus inventoreiste hic atque necessitatibus id labore libero dicta voluptate
				cum，iure provident nesciunt enim maxime distinctiovelit tempora! A cumque maxime voluptatem iste vero
				commodi， consequatur at veritatis，facilis minus quibusdamperspiciatis rem! Ad.R</div>
			<div>
				lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
				quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
			</div>
			<div>lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
				quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
				necessitatibus alias et quofugit，nulla doloribus explicabo asperiores optio soluta non!Reiciendis ipsam
				totam laudantium doloribus inventoreiste hic atque necessitatibus id labore libero dicta voluptate
				cum，iure provident nesciunt enim maxime distinctiovelit tempora! A cumque maxime voluptatem iste vero
				commodi， consequatur at veritatis，facilis minus quibusdamperspiciatis rem! Ad.R</div>
			<div>
				lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
				quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
			</div>
			
		</div>
	</body>
</html>

　　

------------恢复内容结束------------

posted on 2022-03-29 15:44  郭东康  阅读(24)  评论(0)    收藏  举报