CSS 网格 - 在 2 个水平 div 之间自动填充
CSS grid - Auto fill between 2 horizontal divs
我需要创建 +150 个 value/pair 表单。
问题:如何确保当左侧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>
我记得你的 ,虽然记得 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 两个循环的代码,我会根据您的目的对其进行调整。
我需要创建 +150 个 value/pair 表单。
问题:如何确保当左侧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>
我记得你的
<?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 两个循环的代码,我会根据您的目的对其进行调整。