Question

我正在尝试创建一个多列下拉菜单，但是我不知道为什么列的高度不同。第一个完全适合父div，其他不适合。我还注意到，使用相同的代码在Codepen中没有任何显示问题，而在我的浏览器中却无法使用。您可以看到它在Codepen中的样子： https://codepen.io/anon/pen/bxgQrL与实际情况：https://ibb.co/fZLUkK。任何帮助将不胜感激。

.dropdown ul {
  list-style-type: none;
}

.col {
  display: inline-block;
  height: 100%;
  width: 20%;
  margin: 0px;
  border-bottom: 1px solid black;
}

.dropdown {
  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: white;
  text-transform: uppercase;
  height: 300px;
  width: 70%;
  padding: 0;
}

.dropdown a {
  font-size: 0.5em;
}

.sale {
  background-color: #ee2b53;
  color: white;
  /*background-image: url(https://images3.nike.com/is/image/DotCom/PHN_PS/1U646_137_C_PREM/converse-chuck-taylor-monochrome-high-top-unisex-shoe.png?fmt=png-alpha);*/
  width: 100%;
}

<div class="dropdown">
  <div class="col woman">
    <h4>Donna</h4>
    <ul>
      <li><a href="#">Vedi Tutto</a></li>
      <li><a href="#">Sneakers &amp slip-on</a></li>
      <li><a href="#">Ballerine &amp flats</a></li>
      <li><a href="#">Mocassini &amp stringate</a></li>
      <li><a href="#">Décolleté</a></li>
      <li><a href="#">Stivaletti</a></li>
      <li><a href="#">Abbigliamento &amp borse</a></li>
      <li><a href="#">Capsule Limited edition</a></li>
    </ul>
  </div>
  <div class="col man">
    <h4>Uomo</h4>
    <ul>
      <li><a href="#">Vedi Tutto</a></li>
      <li><a href="#">Sneakers</a></li>
      <li><a href="#">Mocassini &amp slip-on</a></li>
      <li><a href="#">Stivali</a></li>
      <li><a href="#">Giacche</a></li>
    </ul>
  </div>
  <div class="col child-f">
    <h4>Bimba</h4>
    <ul>
      <li><a href="#">Vedi tutto</a></li>
      <li><a href="#">Baby</a></li>
    </ul>
  </div>
  <div class="col child-m">
    <h4>Bimbo</h4>
    <ul>
      <li><a href="#">Vedi tutto</a></li>
      <li><a href="#">Baby</a></li>
    </ul>
  </div>
  <div class="col sale">
  </div>
</div>

预先感谢

Answer 1

但是无法设置它的网格列

 display: -ms-inline-flexbox;
 display: inline-flex;

并删除

grid-template-columns: repeat(5, 1fr);

似乎可以胜任这项工作。

显示div内联，可在Codepen中工作，但不能在浏览器中工作

1 个答案: