CSS：网格列，确保列高相同[重复]

8ehkhllq 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(89)

此问题已在此处有答案：

One flex/grid item sets the size limit for siblings（6个回答）
2天前关闭。
我想知道是否有可能使左侧列的图像与右侧内容具有相同的高度？我现在面临的问题是，我希望具有响应式弹出窗口，其高度应主要取决于右侧内容，而左侧的图像应与内容具有相同的高度。我错过了什么？

<div class="grid grid-cols-1 items-center bg-purewhite rounded-xl shadow authentication-popup lg:grid-cols-auth-popup lg:max-w-[55rem] lg:w-max svelte-q5aaad opened" style="grid-template-rows: auto !important;">
   <div class="w-full h-full relative shrink-0 lg:rounded-l-xl lg:w-fit"> 
      <img class="w-full h-[200px] object-authentication object-cover rounded-t-xl lg:w-[380px] lg:h-full lg:rounded-l-xl lg:rounded-tr-none" style="/*! height: 100% !important; */" src="https://plus.unsplash.com/premium_photo-1677942035529-db39d2a25915?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=928&amp;q=80">
   </div>
   <div class="flex flex-col grow p-6">
      <div class="flex items-center gap-1.5 justify-between">
         <p class="text-primary font-bold text-3xl lg:whitespace-nowrap">Please Sign In</p>
         <i class="close-pm-delete-confirm-popup fa-solid fa-xmark fa-xl text-secondary cursor-pointer"></i>
      </div>
   </div>
</div>

css

来源：https://stackoverflow.com/questions/75935746/css-grid-columns-ensure-that-column-heights-are-the-same

1条答案

按热度按时间

gcmastyq1#

最好的解决方案是使用flexbox。

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}

.wrapper>.left {
  background: #fcc;
}

.wrapper>.right {
  background: #ccf;
  flex: 1;
}

参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
如果没有固定高度

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

赞(0）回复(0）举报 2023-04-08

我来回答

CSS：网格列，确保列高相同[重复]

1条答案

相关问题

热门标签

最新问答