我正在处理我网页上的列。我在最左边的列中创建了一个非常简单的菜单边栏。下一列是分配给每个元素的年份，以这种方式在打开网页时完全对齐。
但是，我使用了切换代码，这样当您单击第一列中的一个元素时，会弹出一个小描述，导致整个列垂直展开。这当然也意味着元素不再与其指定的年份保持一致，在下一栏中。
我希望第二列中的数字能够根据第一列自动对齐。这怎么可能？
这是一些代码:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Project1").click(function(){
$("p.Describtion1").toggle();
});
});
</script
</head>
<body>
<div id="content">
<div class="FirstColumn">
<div id="Project1">
Wer Baut Der Stadt 2019
</div>
<p class="Describtion1">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin in 2019.
</p>
<br>
#content{
display: grid;
grid-template-columns: 18% 7% 18% 7% 18% 7% 18% 7%;
grid-template-rows: repeat(4, minmax(150px,auto));
padding: 30px;
margin: 0 auto;
text-align: left;
}
最佳答案
你为什么不使用 <table>为了这？它看起来很适合你正在尝试的东西:
$(document).ready(function(){
$("#Project1").click(function(){
$("p.Describtion1").toggle();
});
});#content {
width: 100%;
border-spacing: 0;
}
#content td {
background-color:red;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
vertical-align: top;
}
#content td:nth-child(odd) {
width: 18%;
}
#content td:nth-child(even) {
width: 7%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="content">
<tr>
<td id="Project1">
Wer Baut Der Stadt 2019
<br>
<p class="Describtion1">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin in 2019.
</p>
</td>
<td>2019</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td id="Project2">
Hans Oscar Carlsson
</td>
<td>2019</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<table>关于css - 在 css 网格中同步切换列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59269397/