logo标签列表

CSS网格布局 - 使重复行的列宽保持一致，不受内容宽度影响

csscss-grid
3
我有一个CSS网格，重复的行宽度不同。每个单元格中的数据长度可能会有所不同。如何使所有重复行的宽度相同？
我希望第一列宽度为10％，第二列宽度为45％，剩余的为第三列。这就是我使用以下代码的原因：
grid-template-areas:
'user-l user-m user-m user-m user-m user-m user-m user-r user-r user-r user-r'

数据 user-container 会为“n”个用户重复出现。

body {margin: 0}

.user-l {grid-area:user-l}
.user-m {grid-area:user-m}
.user-r {grid-area:user-r}

.user-container {
  display: grid;
  grid-template-areas:
  'user-l user-m user-m user-m user-m user-m user-m user-r user-r user-r user-r'
}

.user-l,
.user-m,
.user-r {
  border: 1px solid #ddd;
  padding: 20px;
}

.user-l {background-color: #2196F3}
.user-m {background-color: #219683}
.user-r {background-color: #216683}
<h1>Grid Elements - How to keep width the same ?</h1>

<p>In the example below, blue and green should have the same width all the time. </p>

<div class="user-container">
  <div class="user-l">
   <p>Name: jsdsdsd djsds</p>
  </div>
  <div class="user-m">
     <p>Age: 23</p>
  </div>
  <div class="user-r">
   <p>Occupation: Doctor</p>
  </div>
</div>

<div class="user-container">
  <div class="user-l">
   <p>Name: ANother longer Names</p>
  </div>
  <div class="user-m">
     <p>Age: 23</p>
  </div>
  <div class="user-r">
   <p>Occupation: Another Occupation</p>
  </div>
</div>

移除 grid-template-area / grid-area 并添加 grid-template-columns: repeat(3, 1fr); - VXp
@VXp 那将形成3个等宽的列，对吧？我想让第1列宽度为10％，第2列宽度为45％，剩余的空间留给第3列。 - Kal
是的，然后添加：grid-template-columns: 10% 45% 1fr; - VXp
@VXp 好的，明白了。我认为这就是一个答案。 - Kal
很可能是。 - VXp
显示剩余2条评论
2个回答
1

created and fixed the width for user-l user-m user-r and added grid-template-columns: 10% 45% 1fr; which will provide the size of the div 

body {margin: 0}

.user-l {grid-area:user-l}
.user-m {grid-area:user-m}
.user-r {grid-area:user-r}

.user-container {
  display: grid;
 grid-template-columns: 10% 45% 1fr;
  grid-template-areas:
  'user-l user-m  user-r'
  
}

.user-l,
.user-m,
.user-r {
  border: 1px solid #ddd;
  padding: 20px;
}

.user-l {background-color: #2196F3; }
.user-m {background-color: #219683;}
.user-r {background-color: #216683;}
<h1>Grid Elements - How to keep width the same ?</h1>

<p>In the example below, blue and green should have the same width all the time. </p>

<div class="user-container">
  <div class="user-l">
   <p>Name: jsdsdsd djsds</p>
  </div>
  <div class="user-m">
     <p>Age: 23</p>
  </div>
  <div class="user-r">
   <p>Occupation: Doctor</p>
  </div>
</div>

<div class="user-container">
  <div class="user-l">
   <p>Name: ANother longer Names</p>
  </div>
  <div class="user-m">
     <p>Age: 23</p>
  </div>
  <div class="user-r">
   <p>Occupation: Another Occupation</p>
  </div>
</div>

0

以下代码应该可以解决问题。答案基于上面VXp的评论。

<!DOCTYPE html>
<html>
<head>
<style>

.user-container { display: grid;}
.user-container  {
 grid-template-columns: 10% 45% 1fr; 
  }
  
.user-l {
background-color: #2196F3;
border: 1px solid #ddd;
padding 20px;
}
.user-m {
background-color: #219683;
border: 1px solid #ddd;
padding 20px;
}
.user-r {
background-color: #216683;
border: 1px solid #ddd;
padding 20px;
}

</style>
</head>
<body>

<h1>Grid Elements - How to keep width the same ?</h1>

<p>In the example below, blue and green should have the same width all the time. </p>


<div class="user-container">
  <div class="user-l">
   <p>Name: jsdsdsd djsds</p>
  </div>
  <div class="user-m">
     <p>Age: 23</p>
  </div>
  <div class="user-r">
   <p>Occupation: Doctor</p>
  </div>
</div>

<div class="user-container">
  <div class="user-l">
   <p>Name: ANother longer Names</p>
  </div>
  <div class="user-m">
     <p>Age: 23</p>
  </div>
  <div class="user-r">
   <p>Occupation: Another Occupation</p>
  </div>
</div>

</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接