css - 如何仅使用 CSS 将动态流动的 CSS 多列保持为固定宽度？

Question

我有一个带旁边的主容器。旁边有一个固定的宽度，我正在使用 CSS Grid 来绘制这个容器。在主容器内，有一系列包含动态数据的列，这些列会根据需要自动流动、对齐以及将数据从一列转移到另一列。此列设置使用 CSS 多列，但列的宽度会根据用户浏览器的屏幕大小而改变。我想找到一个 CSS 解决方案，将这些列保持在设定的宽度。有没有办法自动扩展最后绘制的列？或者有没有办法阻止动态多列计数扩展？我试过align-items:start了，但没有看到效果。有没有办法通过容器将列保持在设定的宽度？

@charset "UTF-8";
/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */
html, body {
  padding: 0;
  margin: 0;
}

section {
  padding: 3px;
}

input {
  width: 100%;
  box-sizing: border-box;
}

label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-family: "Miriam Libre";
  font-size: 10px;
  color: #213C3A;
}

.Cols {
  margin: 0;
  padding: 0;
  columns: 40ch;
  column-count: auto;
  column-fill: auto;
  column-rule: 1px dotted #3DB199;
  height: 100vh;
  /* ↓ columns defined by width */
  overflow: auto;
}

li {
  width: 100%;
  display: inline-block;
  padding: 3px;
  border-bottom: 1px solid #D36B66;
}

.G {
  display: grid;
}
.G-wAside {
  grid-template-columns: 1fr minmax(0, 10vw) 10vw;
  gap: 1vw;
}
.G-23 {
  grid-template-columns: 66.66% 33.33%;
}

.HVpZ {
  height: 100%;
}

.WVpZ {
  width: 100%;
}

.filler {
  background: #CCE0E2;
}

.fieldset {
  margin: 5px 3px;
}
.fieldset > * {
  margin: 1px 0;
}
.fieldset label {
  margin-right: 3px;
}

.placeholder-uploader {
  height: 320px;
  width: 100%;
  background: #FAF9E9;
}
.placeholder-grid {
  width: 640px;
  height: 230px;
  background: #FAF9E9;
  position: absolute;
}

.col-container {
  overflow: hidden;
  position: relative;
  height: 100px;
  grid-row-start: span 2;
}

<main class="G HVpZ WVpZ G-wAside">
  <section>
    <ul class="Cols">
      <li>
        <div class="fieldset">
          <label>New List Is Just Long</label>
          <input type="text"></input>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text"></input>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text"></input>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text"></input>
        </div>
        <div class="col-container">
          <div class="placeholder-grid"></div>
        </div>

        <div class="G G-23">
          <div class="fieldset">
            <label>Grid Label DIV Name</label>
            <input type="text"></input>
          </div>
          <div class="fieldset">
            <label>Label Is Just Longest Of All</label>
            <input type="text"></input>
          </div>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text"></input>
        </div>
      </li>
      <li>
        <div class="col-container">
          <div class="placeholder-grid"></div>
        </div>
      </li>
      <li>
        <p>Praesent vestibulum semper erat ut varius. Donec sed erat ac odio ultricies bibendum et sit amet lectus. In placerat consequat mi, sed commodo mauris ornare non. Integer nibh leo, dignissim in purus at, pretium porta nibh. Nulla vestibulum imperdiet
          sollicitudin. Morbi euismod justo metus, quis imperdiet nunc eleifend ultrices. Donec nec maximus lacus. Aenean tincidunt mattis nisi, eget molestie dolor iaculis vel. Praesent faucibus risus vel arcu tincidunt, id varius orci bibendum. Duis
          posuere est in diam luctus ultrices id in sapien. Fusce bibendum pharetra velit, sit amet commodo diam pharetra ac.</p>
      </li>
    </ul>
  </section>
  <section class="filler">&larr; How to auto-fill this space to keep css multi columns in previous grid item to set width of 40ch? &rarr;</section>
  <section class="bg">Aside</section>
</main>

标签： csscss-gridfixed-widthcss-multicolumn-layout

Answer 1

我不知道这是否能满足您的需求，也许它可以与之前的答案结合使用。

由于输入列的大小是固定的，为什么不为此部分使用表格布局？可能需要一些其他 CSS 更改来满足您设计的响应性。

@charset "UTF-8";

/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */

html,
body {
  padding: 0;
  margin: 0;
}

section {
  padding: 3px;
}

input {
  width: 100%;
  box-sizing: border-box;
}

label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-family: "Miriam Libre";
  font-size: 10px;
  color: #213C3A;
}

.Cols {
  margin: 0;
  padding: 0;
  columns: 40ch;
  column-count: auto;
  column-fill: auto;
  column-rule: 1px dotted #3DB199;
  height: 100vh;
  /* ↓ columns defined by width */
  overflow: scroll;
}

li {
  width: 100%;
  display: inline-block;
  padding: 3px;
  border-bottom: 1px solid #D36B66;
}

.G {
  display: grid;
}

.G-wAside {
  grid-template-columns: 1fr minmax(0, 10vw) 10vw;
  gap: 1vw;
}

.G-23 {
  grid-template-columns: 66.66% 33.33%;
}

.HVpZ {
  height: 100%;
}

.WVpZ {
  width: 100%;
}

.filler {
  background: #CCE0E2;
}

.fieldset {
  margin: 5px 3px;
}

.fieldset>* {
  margin: 1px 0;
}

.fieldset label {
  margin-right: 3px;
}

.placeholder-uploader {
  height: 320px;
  width: 100%;
  background: #FAF9E9;
}

.placeholder-grid {
  width: 640px;
  height: 230px;
  background: #FAF9E9;
  position: absolute;
}

.col-container {
  overflow: hidden;
  position: relative;
  height: 100px;
  grid-row-start: span 2;
}

#tbl {
  table-layout: fixed;
}

#tbl td {
  min-width: 25em;
  max-width: 25em;
}

#tbl2 {
  table-layout: fixed;
}

#tbl2 td {
  min-width: 25em;
}

ul {
  list-style-type: none;
  cursor: pointer;
}

li {
  display: inline-block;
}


/* default is vertical     display */

<main class="G HVpZ WVpZ G-wAside">
  <section>
    <ul class="Cols">
      <li>
        <table id="tbl" border="1">
          <tr>
            <td>
              <div class="fieldset">
                <label>New List Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fieldset">
                <label>Label Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fieldset">
                <label>Label Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fieldset">
                <label>Label Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="col-container">
                <div class="placeholder-grid"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="G G-23">
                <div class="fieldset">
                  <label>Grid Label DIV Name</label>
                  <input type="text"></input>
                </div>
                <div class="fieldset">
                  <label>Label Is Just Longest Of All</label>
                  <input type="text"></input>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fieldset">
                <label>Label Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <!--
   <li>
    <div class="col-container">
     <div class="placeholder-grid"></div>
    </div>
   </li>
// -->
      <li>

        <table id="tbl2" border="1">
          <tr>
            <td>
              <p>Praesent vestibulum semper erat ut varius. Donec sed erat ac odio ultricies bibendum et sit amet lectus. In placerat consequat mi, sed commodo mauris ornare non. Integer nibh leo, dignissim in purus at, pretium porta nibh. Nulla vestibulum
                imperdiet sollicitudin. Morbi euismod justo metus, quis imperdiet nunc eleifend ultrices. Donec nec maximus lacus. Aenean tincidunt mattis nisi, eget molestie dolor iaculis vel. Praesent faucibus risus vel arcu tincidunt, id varius orci
                bibendum. Duis posuere est in diam luctus ultrices id in sapien. Fusce bibendum pharetra velit, sit amet commodo diam pharetra ac.</p>
            </td>
          </tr>
        </table>

      </li>
    </ul>
  </section>
  <section class="filler">
    &larr; How to auto-fill this space to keep css multi columns in previous grid item to set width of 40ch? &rarr;
  </section>
  <section class="bg">Aside</section>
</main>