我正在处理一个页面，目前我在该页面的菜单中放置了 12 个标题。我用一张 table 来布置元素。单击一个元素/元素后，表格会垂直展开并显示元素描述。
我想为整个表格设置一个 max-height 属性，使其只能扩展到某个点。因此，每当由“已打开”和“已关闭元素”的总和确定的表格列的总高度超过一定高度时，元素就会跳到表格中的下一列，它可以继续向下扩展。基本上就好像它的功能就像网格中的常规列一样。
这是一些代码
<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>
<table id="content">
<tr>
<td id="Project1">
Wer Baut Der Stadt 2019
<br>
<p class="Describtion1" style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
<br>
</td>
<td>2019</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
body {
font-family: 'Helvetica Neue';
text-align: center;
}
#content {
width: 100%;
border-spacing: 0;
}
#content td {
border-left: 3px solid #fff;
border-right: 3px solid #fff;
vertical-align: top;
text-align: left;
font-size: 30px;
max-height: 500px;
}
#content td:nth-child(odd) {
width: 18%;
}
#content td:nth-child(even) {
width: 7%;
}
#Project1:hover {
text-decoration: underline;
cursor: default;
}
p {
display: inline-block;
text-align: left;
padding-left:30px;
padding-right:30px;
font-size: 15px;
}
最佳答案
试过这个:
#content {
display: flex;
flex-grow: 1;
flex-direction: column;
max-height: 500px;
}
#content td {
display: flex;
flex-grow: 1;
flex-direction: column;
}
关于html - 当表格垂直扩展到最大高度时 - 使元素在下一个表格单元格列中弹出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59286762/