下面的脚本在屏幕的每一侧都显示完全相同的内容。我试图发现的是，如何将一组dl/dt/dd定义分组为左侧正常，将dt下方的dd分组为多行，但将在同一单行上显示dt/dd的另一组
我不知道如何为同一页面创建两个不同的dt/dd显示。
如果你在dl/dt/dd部分被注释掉的情况下执行脚本，然后第二次使用它，你会看到我试图实现的效果，但多行和单行显示都发生在同一页面上。我认为必须有一种方法来定义CSS语句，以便在同一页面的不同位置以不同的方式进行操作。显然，我不会在真实的项目中进行显示，并排显示仅用于问题演示目的。有办法做到这一点吗？
我尝试用修改后的dl/dt/dd语句创建一个类，然后将其作为类引用。这种方法似乎不起作用。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> DL/DT/DD Demos </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<!-- See: https://medium.com/@jakehyer/css-grid-auto-fit-minmax-e54f99989668 -->
<style>
main {
display: grid;
gap: 0.25rem;
}
/* 12.5rem (9 boxes), 16 (7), 18 (6), 20 (5), 25 (4), 33rem (3), 40rem (2) all work */
/* */
.gridCols9 { grid-template-columns: repeat(auto-fit,minmax(12.5rem, 1fr)); }
.gridCols7 { grid-template-columns: repeat(auto-fit,minmax(16rem, 1fr)); }
.gridCols6 { grid-template-columns: repeat(auto-fit,minmax(18rem, 1fr)); }
.gridCols5 { grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr)); }
.gridCols4 { grid-template-columns: repeat(auto-fit,minmax(25rem, 1fr)); }
.gridCols3 { grid-template-columns: repeat(auto-fit,minmax(33rem, 1fr)); }
.gridCols2 { grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr)); }
/* */
main > fieldset { border: 1px solid black; }
.fontInfo {
white-space: pre-wrap;
font-family: monospace;
}
h3 {
background-color: lightgreen; text-align: center;
font-size: 1.2rem; cursor: pointer;
margin: 0; padding: 0;
}
article { margin-top: 0; display: block; }
/* Following from: https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line */
/* Comment out following for entirely different display */
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt { grid-column-start: 1; }
dd { grid-column-start: 2; }
/* */
</style>
</head><body>
<main class="gridCols4">
<fieldset> <legend> Normal </legend>
<article><h3>DL/DT/DD Display</h3></article>
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
</fieldset>
<fieldset> <legend> Modified </legend>
<article><h3>DL/DT/DD Display</h3></article>
<dl class="singleLines">
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
</fieldset>
</main>
</body></html>
也许我遗漏了一些东西，但您似乎只需要将dt/dd设置为带有'>'的dl的子元素性格以下是两个不同版本视图的示例：
main {
display: grid;
gap: 0.25rem;
}
/* 12.5rem (9 boxes), 16 (7), 18 (6), 20 (5), 25 (4), 33rem (3), 40rem (2) all work */
/* */
.gridCols9 { grid-template-columns: repeat(auto-fit,minmax(12.5rem, 1fr)); }
.gridCols7 { grid-template-columns: repeat(auto-fit,minmax(16rem, 1fr)); }
.gridCols6 { grid-template-columns: repeat(auto-fit,minmax(18rem, 1fr)); }
.gridCols5 { grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr)); }
.gridCols4 { grid-template-columns: repeat(auto-fit,minmax(25rem, 1fr)); }
.gridCols3 { grid-template-columns: repeat(auto-fit,minmax(33rem, 1fr)); }
.gridCols2 { grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr)); }
/* */
main > fieldset { border: 1px solid black; }
.fontInfo {
white-space: pre-wrap;
font-family: monospace;
}
h3 {
background-color: lightgreen; text-align: center;
font-size: 1.2rem; cursor: pointer;
margin: 0; padding: 0;
}
article { margin-top: 0; display: block; }
/* Following from: https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line */
/* Comment out following for entirely different display */
dl.singleLines {
display: grid;
grid-template-columns: max-content auto;
}
dl.singleLines>dt { grid-column-start: 1; }
dl.singleLines>dd { grid-column-start: 2; }<main class="gridCols4">
<fieldset>
<legend> Normal </legend>
<article>
<h3>DL/DT/DD Display</h3>
</article>
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
</fieldset>
<fieldset>
<legend> Modified </legend>
<article>
<h3>DL/DT/DD Display</h3>
</article>
<dl class="singleLines">
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
</fieldset>
</main>