P5，HTML & CSS - 在网格区域内衬 DOM 个元素

Question

我正在努力将 P5.JS 滑块放入 CSS 网格。不幸的是，我没有在代码片段函数中展示它。因此，我将粘贴我的代码并通过图像显示结果。

我的一部分 HTML:

  <body>
    
    <div class="menu">
      <h1>MENU</h1>
    </div>

    <div class="outer">
      <div class="container">

        <div class="temp">

        </div>

        <div class="draw">
          <p id="canvas"></p>

        </div>


        <div class="label">

          <label for="shapes">Shapes</label><br>
          <label for="scale">Scale</label><br>
          <label for="rotation">Rotation</label><br>
          <label for="background">Background</label><br>
          <label for="stroke">Stroke</label><br>
          <label for="fill">Fill</label><br>

        </div>

        <div class="slider">

          <p id="shape"> </p>
          <p id="scale"> </p>
          <p id="rotation"> </p>
          <p id="background"> </p>
          <p id="stroke"> </p>
          <p id="fill"> </p>
          <p id="position"> </p>
          <p id="save"> </p>
          <p id="record"> </p>

        </div>

        <div class="check">

          <p id="checkshape"> </p>
          <p id="checkscale"> </p>
          <p id="checkbackground"> </p>
          <p id="checkstroke"> </p>
          <p id="checkfill"> </p>
          <p id="checkposition"> </p>
          <p id="checkpaint"> </p>
          <p id="checkrecord"> </p>

        </div>
      </div>
    </div>
  </body>
</html>

我的一部分 CSS:

* {
  margin: 0;
  padding: 0;
}
.outer div {
  outline: 1px solid red;
  min-height: 20px;
}

body {
  width: 100vw;

}
.menu {
  width: 100%;
  height: 60px;
}
.outer {
  display: flex;
  justify-content: center;
  margin-top: 1vw;
}

.container {
  width: 95%;
  display: grid;
  grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1vw;
}


.menu,
.container div {
  border: 1px solid black;
  box-sizing: border-box;
}

.temp {
  grid-column: 1 / 2;
}

.draw {
  grid-column: 2 / 3;
  aspect-ratio: 1 / 1;
}

.label {
  grid-column: 3 / 4;
  text-align: right;
}

.slider {
  grid-column: 4 / 5;
}

.check {
  grid-column: 5 / 6;

}

我的部分P5.JS（仅展示部分滑块）

function setup(){

  canvasForPosition = createCanvas(windowWidth, windowHeight);
  canvasForPosition.parent('#canvas');

  sliderSize = createSlider(10, height,height/2,0.00001);
  sliderSize.parent('#scale');

  checkScaleAuto = createCheckbox('Automate', false);
  checkScaleAuto.parent('#checkscale');


}

结果：

衬里应该是这样的。 + 我想在左边添加额外的标签（这里的定位是用 p5.position 做的）：

我想知道我是否可以以某种方式将另一个网格嵌套到我的第 3/6 列中，以及它是否与所有浏览器兼容。或者也许有一个选项可以将复选框的高度与文本和滑块相匹配。

感谢您的帮助。最大值

Answer 1

考虑到您的 HTML 的结构，并且需要让最后 3 列的内容对齐，最简单的事情似乎是使每个列成为一列、多行网格。将每行分成大小相等的 31 行。

然后您可以将每个 HTML 元素准确地放在您想要的行中，以便 labels/sliders/checks 按要求对齐。

去掉多余的br元素，让grid做定位。

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .outer div {
      outline: 1px solid red;
      min-height: 20px;
    }
    
    body {
      width: 100vw;
    }
    
    .menu {
      width: 100%;
      height: 60px;
    }
    
    .outer {
      display: flex;
      justify-content: center;
      margin-top: 1vw;
    }
    
    .container {
      width: 95%;
      display: grid;
      grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 1vw;
    }
    
    .menu,
    .container div {
      border: 1px solid black;
      box-sizing: border-box;
    }
    
    .temp {
      grid-column: 1 / 2;
    }
    
    .draw {
      grid-column: 2 / 3;
      aspect-ratio: 1 / 1;
    }
    
    .label,
    .slider,
    .check {
      display: grid;
      grid-template-rows: repeat(31, 1fr);
      grid-template-columns: 1fr;
      gap: 0.25vw;
    }
    
    .label {
      grid-column: 3 / 4;
      text-align: right;
    }
    
    .slider {
      grid-column: 4 / 5;
    }
    
    .check {
      grid-column: 5 / 6;
    }
    
    .label>*,
    .slider>*,
    .check>* {
      background: lightblue;
    }
  </style>
</head>

<body>

  <div class="menu">
    <h1>MENU</h1>
  </div>

  <div class="outer">
    <div class="container">

      <div class="temp">

      </div>

      <div class="draw">
        <p id="canvas"></p>

      </div>


      <div class="label">

        <label for="shapes">Shapes</label>
        <label for="scale">Scale</label>
        <label for="rotation">Rotation</label>
        <label for="background">Background</label>
        <label for="stroke">Stroke</label>
        <label for="fill">Fill</label>

      </div>

      <div class="slider">

        <p id="shape"> </p>
        <p id="scale"> </p>
        <p id="rotation"> </p>
        <p id="background"> </p>
        <p id="stroke"> </p>
        <p id="fill"> </p>
        <p id="position"> </p>
        <p id="save"> </p>
        <p id="record"> </p>

      </div>

      <div class="check">

        <p id="checkshape"> </p>
        <p id="checkscale"> </p>
        <p id="checkbackground"> </p>
        <p id="checkstroke"> </p>
        <p id="checkfill"> </p>
        <p id="checkposition"> </p>
        <p id="checkpaint"> </p>
        <p id="checkrecord"> </p>

      </div>
    </div>
  </div>
</body>

</html>

我没有在这里对标签等进行任何定位，因为我不知道它们要对齐到哪里。 31 行是一个建议，因此您可以将一些留作空白 space，而不用担心哪些组需要额外的边距，因为 HTML 的结构不是这样的。

P5，HTML & CSS - 在网格区域内衬 DOM 个元素

P5, HTML & CSS - Lining DOM elements inside a grid area

javascript

html

css

grid

p5.js