如何在放大网格布局时使 div 不移动答案

【问题标题】：How to make divs not move during zooming in grid layout如何在放大网格布局时使 div 不移动
【发布时间】：2020-07-15 13:50:30
【问题描述】：

我在放大浏览器时遇到问题。我将“details__view”拆分为两个网格列，但在缩放期间这些列不保持其位置和宽度。我尝试使用 position: absolute 和 position:relative 但是分成列的部分完全消失了。这是我的html：

<div className="box__details">
          <div className="details__container">
            <div className="details__container--title">Details</div>
            <div className="details__view">
              <div className="label">Name</div>
              <div className="value">XYZ</div>
            </div>
            <div className="details__view">
              <div className="label">Second Name</div>
              <div className="value">XYZ</div>
            </div>
            <div className="details__view">
              <div className="label">Country</div>
              <div className="value">XYZ</div>
            </div>
          </div>
</div>

和 CSS：

.box__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;

}

.details__container {
  border: 1px solid #eee;
  padding: 10px;
  border: 1px solid #eee;
}

.details__container--title {
  padding-bottom: 15px;
}

.details__view {
  display: grid;
  grid-template-columns: .4fr .4fr;
  padding-bottom: 15px;
}

.label {
  padding-left: 5px;
}

.value {
  text-align: left;
}

您有什么想法如何使标签和值在缩放期间不改变？提前感谢您的帮助！

【问题讨论】：

标签： html css reactjs gridview zooming

【解决方案1】：

由于您使用的是fr，因此列未保持其位置。这使得框保持在您在屏幕比例上放置的位置，从而在放大时向右移动一点（有点像使用%）。要使其保持原位，您可能必须使用 px 之类的东西；通过将grid-template-columns: 1fr 1fr; 更改为grid-template-columns: 427px 427px; 之类的东西

【讨论】：