我需要创建 +150 值/对形式。
问题:如何确保当左侧 div 填充到其高度时，其余数据与右侧 div 连续？
.wrapper {
display: grid;
grid-template:
"form" 800px
/ 1fr;
}
.form {
display: grid;
grid-template:
"table_area_1 table_area_2" 200px
/ 1fr 1fr;
}
.table_area_1 {
display: grid;
grid-auto-rows: 30px;
grid-template-columns: 1fr 100px;
grid-auto-flow: column;
}
.table_area_1 {
margin: 0 10px 0 10px;
background-color: pink;
}
.table_area_2 {
grid-area: table_area_2;
background-color: lightblue;
}
.titles {
background-color: lightgrey;
padding: 5px 0 0 5px;
width: 125%;
}
.table_area_1 label {
grid-column: 1;
}
.table_area_2 input {
grid-column: 2;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="form">
<div class="table_area_1">
<label for="1">Label-1</label>
<label for="2">Label-2</label>
<label for="3">Label-3</label>
<label for="4">Label-4</label>
<label for="5">Label-5</label>
<label for="6">Label-6</label>
<label for="7">Label-7</label>
<label for="8">Label-8</label>
<label for="9">Label-9</label>
<label for="10">Label-10</label>
<input id="1" type="text">
<input id="2" type="text">
<input id="3" type="text">
<input id="4" type="text">
<input id="5" type="text">
<input id="6" type="text">
<input id="7" type="text">
<input id="8" type="text">
<input id="9" type="text">
<input id="10" type="text">
</div>
<div class="table_area_2"></div>
</div>
</div>
</body>
</html>最佳答案
这是 CSS Multi Columns 的示例.我劝你不要使用 display: grid;对于每个块，就像在您的示例中一样。无论如何，看看解决方案。
.form {
column-count: 2;
column-fill: auto;
/* just for instance */
height: 100px;
background: pink;
}
.form label {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="form">
<label for="1">
<span>Label-1</span>
<input id="1" type="text">
</label>
<label for="2">
<span>Label-2</span>
<input id="2" type="text">
</label>
<label for="3">
<span>Label-3</span>
<input id="3" type="text">
</label>
<label for="4">
<span>Label-4</span>
<input id="4" type="text">
</label>
<label for="5">
<span>Label-5</span>
<input id="5" type="text">
</label>
<label for="6">
<span>Label-6</span>
<input id="6" type="text">
</label>
</div>
</body>
</html>我记得你的 previous question ，尽管还记得 PHP 中用于标签和字段的两个单独循环。现在不要过多地介绍您的后端，但可以向您推荐一个循环中的解决方案示例。
<?php $i = 1;
foreach ($labels as $label) { ?>
<label for="<?php echo $i; ?>">
<span>Label-<?php echo $i; ?></span>
<?php $j = 1;
foreach ($inputs as $input) { ?>
<?php if ($j == $i) { ?>
<input id="<?php echo $j; ?>" type="text">
<?php } ?>
<?php $j++; } ?>
</label>
<?php $i++; } ?>
$i作为标签循环的索引和 $j作为输入循环的索引。如 $j == $i在内部循环中 - 我们在标签循环中显示输入。希望这段代码很好读。如果没有 - 显示您的两个循环的 PHP 代码，我将根据您的目的对其进行调整。
关于html - CSS 网格 - 在 2 个水平 div 之间自动填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63193014/