如何使第一行的列占据下面的行？

问题描述 投票：0回答：1

enter image description here

就像上面的图片。如何使用col-lg-6使最右侧的列占据网格系统下面的行。第一和第二列将是col-lg-6，下面的列也将是col-lg-6。我在最右边的一栏使用float right使某些工作正常。但是我可以使用display:relative;来创建这样的列吗？

html css grid
1个回答
0
投票

使用网格区域是一种简单的方法。试试这个：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

.parentDiv{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "firstdiv thirddiv" "seconddiv thirddiv";
grid-gap: 10px;
}
.firstdiv{
grid-area: firstdiv;
background: black;
width: 100%;
height: 100px;
}
.seconddiv{
grid-area: seconddiv;
background: green;
width: 100%;
height: 100px;
}
.thirddiv{
grid-area: thirddiv;
background: red;
width: 100%;
height: 100%;
}

</style>
</head>
<body>
<div class="parentDiv">
	<div class="firstdiv">
	</div>
	<div class="seconddiv">
	</div>
	<div class="thirddiv">
	</div>
</div>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.