CSS网格-2个水平div之间的自动填充
CSS网格-2个水平div之间的自动填充
提问于 2020-07-31 13:42:40
我需要创建+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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-02 08:17:43
下面是CSS多列的示例。我劝您不要对每个块使用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代码，我将根据您的目的对其进行修改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63193014
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号