如何从网格的项目高度分离元素的高度 [英] How to detach element's height from grid's item height

查看：55 发布时间：2020/11/20 21:54:35 css grid

本文介绍了如何从网格的项目高度分离元素的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在设计页面部分的布局(使用网格)时遇到一个小问题...

I am facing a small problem while designing the layout of a section of my page (using grid)...

我有3个元素共享网格的同一行，并且它们都没有定义高度(这意味着将其设置为默认的自动")，因为我需要所有元素的高度都与它们中的内容一样高，并且超时，所有这些元素将包含更多内容，因此高度需要随之增加...

I have 3 elements sharing the same row of the grid and none of them has it's height defined (meaning it is set to it's default "auto") since I need all of them to be as high as the contents inside them and overtime, all of this elements will consist more content so the height will need to grow along with it...

现在，问题是随着其中一个元素的高度增加，它会增加共享同一行的所有元素的高度，请看这张图片

Now, the problem is that as one of the elements increases in height, it increases the height of all the elements sharing the same row, take a look at this image

您看，我已经在表格中填充了大量记录，以进行测试，并且在我添加的每一行中，它的邻居的高度也都增加了，我想不出一种方法来解决它

You see, I've filled the table with tons of records as a way to test it and with every new row I added, the height of it's neighbors increased too and I can't figure out a way to fix it

这是我的代码...

.container {
  width: 100%;
  position: absolute;
  margin: 80px 0px;
  display: grid;
  z-index: -1;
  justify-items: center;
}

.maintitle {
  font-size: 30px;
  grid-column: 2;
  grid-row: 1;
}

.title {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  display: inline-block;
  font-size: 20px;
  margin-bottom: 10px;
}

#addRole {
  background-color: rgb(241, 241, 241);
  width: 80%;
  padding: 20px;
  grid-column: 1;
  grid-row: 2;
  grid-gap: 10px;
}

#editRole {
  background-color: rgb(241, 241, 241);
  width: 80%;
  padding: 20px;
  grid-column: 3;
  grid-row: 2;
  grid-gap: 10px;
}

#roledata {
  width: 100%;
  padding: 20px;
  grid-column: 2;
  grid-row: 2;
}

#addRole input[type='text'],
#editRole input[type='text'] {
  width: 80%;
  height: 40px;
  margin: 5px 5px 5px 0px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  outline: none;
  border: 0.5px solid rgb(167, 167, 167);
}

#addRole input[type='submit'],
#editRole input[type='submit'],
#editRole input[type='number'] {
  width: 80%;
  height: 40px;
  margin: 5px 5px 5px 0px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  outline: none;
}

#addRole form hr,
#editRole form hr {
  width: 30%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.checks {
  display: inline-block;
  padding: 20px;
  text-indent: -20px;
  background-color: rgb(252, 252, 252);
  border: 1px solid rgb(238, 238, 238);
  margin: auto;
}

#checks {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  margin: 10px;
  display: flex-box;
  text-align: center;
}

#editchecks {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  margin: 10px;
  display: flex-box;
  text-align: center;
}

#addRole input[type='checkbox'],
#editRole input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0px 0px 0px 20px;
  outline: none;
  text-align: center;
}


/*Table Design (IRELLEVANT FOR THE PROBLEM/Included for increasing more height with less rows)*/

table {
  background: #f5f5f5;
  border-collapse: separate;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  width: 100%;
  margin: auto;
  font-family: 'Montserrat', sans-serif;
}

th {
  background: linear-gradient(#777, #444);
  border-left: 1px solid #555;
  border-right: 1px solid #777;
  border-top: 1px solid #555;
  border-bottom: 1px solid #333;
  box-shadow: inset 0 1px 0 #999;
  color: #fff;
  font-weight: bold;
  padding: 10px 15px;
  position: relative;
  text-shadow: 0 1px 0 #000;
  text-align: center;
}

th:after {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
  content: '';
  display: block;
  height: 25%;
  left: 0;
  margin: 1px 0 0 0;
  position: absolute;
  top: 25%;
  width: 100%;
}

th:first-child {
  border-left: 1px solid #777;
  box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
  box-shadow: inset -1px 1px 0 #999;
}

td {
  border-right: 1px solid #fff;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 15px;
  position: relative;
  transition: all 300ms;
  text-align: center;
}

td:first-child {
  box-shadow: inset 1px 0 0 #fff;
}

td:last-child {
  border-right: 1px solid #e8e8e8;
  box-shadow: inset -1px 0 0 #fff;
}

tr:last-of-type td {
  box-shadow: inset 0 -1px 0 #fff;
}

tr:last-of-type td:first-child {
  box-shadow: inset 1px -1px 0 #fff;
}

tr:last-of-type td:last-child {
  box-shadow: inset -1px -1px 0 #fff;
}

tbody:hover td {
  color: transparent;
  text-shadow: 0 0 3px #aaa;
}

tbody:hover tr:hover td {
  color: #444;
  text-shadow: 0 1px 0 #fff;
}

<div class="container">
  <span class="maintitle">Roles</span>
  <div id="addRole">
    <span class="title">Add Role</span>
    <div class="result" id="result"></div>
    <form method="POST" id="addrole">
      <input type="text" id="rolename" placeholder="Role Name" />
      <input type="text" id="role_description" placeholder="Role Description" />
      <hr /><span class="title">Include Permissions</span>
      <div id="checks">
        <label class='checks'><input type='checkbox' class='selected'/>Check 1</label>
        <label class='checks'><input type='checkbox' class='selected'/>Check 2</label>
        <label class='checks'><input type='checkbox' class='selected'/>Check 3</label>
      </div>
      <input type="submit" value="Add Role" />
    </form>
  </div>

  <div id="editRole">
    <span class="title">Edit Role</span>
    <div class="result" id="updateresult"></div>
    <form method="POST" id="editrole">
      <input type="number" id="roleid" placeholder="Role ID" />
      <input type="text" id="editrolename" placeholder="Role Name" />
      <input type="text" id="editrole_description" placeholder="Role Description" />
      <hr />
      <div id="editchecks">
        <label class='checks'><input type='checkbox' class='selected'/>Check 1</label>
        <label class='checks'><input type='checkbox' class='selected'/>Check 2</label>
        <label class='checks'><input type='checkbox' class='selected'/>Check 3</label>
      </div>

      <input type="submit" value="Update Role" />
    </form>
  </div>

  <div id="roledata">
    <table>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Description</th>
        <th>Remove</th>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
    </table>
  </div>
</div>

另外，当我们在这里时，您可能知道为什么角色ID"时，编辑角色" 比添加角色" 略宽的原因存在输入...删除此<input type="number" id="roleid" placeholder="Role ID" />并且它们共享相同的宽度...

Also, while we are here, do you maybe know why "Edit Role" is slightly wider than "Add Role" when the "Role ID" input is present... remove this <input type="number" id="roleid" placeholder="Role ID" /> and they share the same width...

推荐答案

默认情况下，网格项具有align-items: stretch;，这意味着可以适应大小，基本上像top:0; bottom:0;一样，将框的顶部固定在顶部父母的身分，相对于边距和底部而言相同.

By default grid items have align-items: stretch; which means grow to fit, basically like top:0; bottom:0; all it's doing is pinning the top edge of the box to the top of the parent, same for bottom with respect to the margin and

设置align-items: flex-start;将项目固定在项目的开头，没有任何提示它延伸的内容将以内容结尾.

Setting align-items: flex-start; pins the item to the start of the item and nothing telling it to stretch it will end with the content.

两个原因.

您没有明确指定每列的宽度，这意味着它将默认为auto.
列的内容宽度取决于内联级别的元素.

auto表示网格列的最小宽度等于内容

假设每列中都有一个元素，

Say each column have one Element in it,

元素将被布局.
将计算内容宽度
剩余空间将平均分配

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: grid;
  grid-auto-flow: column;
}

<div grid>
  <div>
    <input type="text">
  </div>
  <div>
    <input type="text">
  </div>
</div>

我们最终得到了相等大小的列.

We end up with equal size columns.

现在，按照相同的步骤，在第二列中再添加一个输入.

Now we add one more input to the second column following the same steps.

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: grid;
  grid-auto-flow: column;
}

<div grid>
  <div col>
    <input type="text">
  </div>
  <div col>
    <input type="text">
    <input type="text">
  </div>
</div>

由于输入是内联级别元素，因此第二个输入将在同一行上紧挨着第一个输入，从而使内容的总宽度比第一列宽.

Because inputs are inline level elements the second input will sit next to the first one on the same line making the overall width of the content wider than the first column.

剩余的空间仍然均匀地分布在它们之间.

现在，当没有足够的空间来容纳同一行(您的情况)上的两个输入时，它们将自动换行，但是该列将不会调整大小，因为它只是溢出了.

Now when there isn't enough space to fit both inputs on the same line (your case) they will wrap, However the column will not resize because it's just overflow.

我们为每列明确定义宽度.

we explicitly define width for each column.

grid-template-columns: 1fr 1fr;

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<div grid>
  <div>
    <input type="text">
  </div>
  <div>
    <input type="text">
    <input type="text">
  </div>
</div>

这篇关于如何从网格的项目高度分离元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何从网格的项目高度分离元素的高度 [英] How to detach element's height from grid's item height

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何从网格的项目高度分离元素的高度 [英] How to detach element&#39;s height from grid&#39;s item height

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

如何从网格的项目高度分离元素的高度 [英] How to detach element's height from grid's item height

登录关闭