Question

我的CSS代码有问题。我希望它具有响应性，但是每当我设置 .menu-button 的 height 属性时，都会出现此问题：

在我使用它之前，一切都很好。

感谢您的帮助。我是CSS的新手，所以我可能在代码中犯了一些错误。

.menu-button {
  width: 20%;
  height: 6rem;
  position: relative;
  overflow: hidden;
  border: 1px solid #000000;
  background-color: rgba(110, 0, 0, 0.5);
  display: inline-block;
  margin: 1.5em;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

<div id="mainmenu">
  <div class="row">
    <div id="job" class="menu-button">
      <div class="job-icon"></div>
    </div>
    <div id="inventory" class="menu-button">
      <div class="inventory-icon"></div>
    </div>
    <div id="animations" class="menu-button">
      <div class="animations-icon"></div>
    </div>
  </div>
  <div class="row">
    <div id="accesories" class="menu-button">
      <div class="accesories-icon"></div>
    </div>
    <div id="interactions" class="menu-button">
      <div class="interactions-icon"></div>
    </div>
    <div id="horse" class="menu-button">
      <div class="horse-icon"></div>
    </div>
  </div>
  <h1>Panel postaci</h1>
</div>

Answer 1

使用CSS网格，如下所示：

.fixed-height-container {
  height: 300px; /* container height for demonstration */
}

.grid {
  display:               grid;
  grid-gap:              1.5em;
  grid-template-columns: repeat(3, 1fr); /* three columns, diveded equaly */
  grid-template-rows:    repeat(2, 1fr); /* two rows, diveded equaly */
  width:                 60%;
  height:                100%;
}

.menu-button {
  width:            100%;
  height:           100%;
  position:         relative;
  overflow:         hidden;
  border:           1px solid #000000;
  background-color: rgba(110, 0, 0, 0.5);
  display:          inline-block;
}

<div class="fixed-height-container">
  
  <div class="grid">

    <div id="job" class="menu-button">
      <div class="job-icon"></div>
    </div>
  
    <div id="inventory" class="menu-button">
      <div class="inventory-icon"></div>
    </div>
  
    <div id="animations" class="menu-button">
      <div class="animations-icon"></div>
    </div>
  

    <div id="accesories" class="menu-button">
      <div class="accesories-icon"></div>
    </div>
  
    <div id="interactions" class="menu-button">
      <div class="interactions-icon"></div>
    </div>
  
    <div id="horse" class="menu-button">
      <div class="horse-icon"></div>
    </div>
    
  </div>
  
</div>

如何设置此div元素的高度以使其具有响应能力？

1 个答案: