CSS 网格 - 在 2 个水平 div 之间自动填充

Question

我需要创建 +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>

Answer 1

这里是 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 两个循环的代码，我会根据您的目的对其进行调整。

CSS 网格 - 在 2 个水平 div 之间自动填充

CSS grid - Auto fill between 2 horizontal divs

html

css

css-grid

css-tables