Question

我如何使页眉全宽？我希望内容类在右边，技能类在右边30％到70％。如果您能理解我无法解决的问题，请告诉我您是如何使它起作用的。谢谢。

我找不到有关如何使页眉全宽并将内容移动到其他位置的任何信息...

* {
	box-sizing: border-box;
	overflow: hidden;
	padding: 10px;
	margin: 0px;
}

body {
	background-image: url("coder.jpeg");
	background-size: cover;
}

.wrapper {
	display:grid;
	grid-template-columns: 70% 30%;
	grid-template-rows: ;
	grid-gap: 10px;
}

.header {
	background-color: rgba(153, 153, 153, 0.99);
	text-align: center;
	border-radius: 10px;
	font-size: 20px;
}

.skills {
	background-color: rgba(153, 153, 153, 0.99);
	border-radius: 10px;
}

.content {
	background-color: rgba(153, 153, 153, 0.99);
	border-radius: 10px;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Cl32</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="./style.css">
	</head>

	<body>
		<div class="wrapper">
			<div class="header">
				<header>
					<h1>Cdad</h1>
				</header>
			</div>

			<div class="skills">
				<aside>
					<h2>Skills</h2>
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla fuga asperiores iusto eveniet aliquid nobis aliquam ducimus, tempora consequatur neque earum molestiae unde porro, quis numquam error illum temporibus, incidunt autem. Temporibus maxime esse magnam inventore odit vero in quae sit quo laboriosam? Architecto saepe repudiandae ducimus possimus magni numquam?</p>
				</aside>
			</div>

			<div class="content">
				<h2>yuyuyggoggo</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum mollitia sunt at aliquid unde vel sapiente quas sequi repudiandae, quam facere inventore suscipit sed nam quae possimus reprehenderit doloremque. Reprehenderit nisi architecto vel molestiae placeat necessitatibus deleniti laborum facere unde itaque magnam amet ut aspernatur distinctio atque ad perspiciatis nam beatae fugiat illum error veritatis, cupiditate odit? Deserunt earum magni id animi, temporibus sit obcaecati ipsum. Blanditiis, expedita? Fugit dicta ex dignissimos, esse totam voluptas illo maxime minus quae nisi velit nemo sequi nulla et omnis deserunt nam sed ducimus. Minima animi dolor vitae architecto suscipit ipsa eaque autem incidunt.</p>
			</div>
		</div>
		<!--warpper class ends-->
	</body>
</html>

Answer 1

不知道我是否能正确理解您的问题，但是如果您将grid-column: 1 / span 2;添加到标头类中，则会得到完整的宽度。

我如何使标题正常大小。 CSS网格

1 个答案: