Question

我有一个无序列表（本例中有2个元素），当屏幕宽度大于480px时，我希望list元素的高度与元素的宽度相匹配。这是我尝试过的：

li {
  list-style:none;
  float:left;
  width:90%;
  margin:5%;
  background-color:#000;
  color:#bdc3c7;
  margin:5%;
}


img {max-width:90%;}



@media screen and (min-width: 480px) {
  li {
    float:left;
    width:45%;
    height:45%;
      margin:2.5%;
  }

}

<section>
  <ul id="gallery">
    <li>
      <h3>Logo </h3>
      <img src="https://s2.graphiq.com/sites/default/files/2307/media/images/t2/Deep_Sky_Blue_429606_i0.png" id="small_img">
    </li>
    <li>
      <h3>Description </h3>
      <p id="profile_des">This is some text and more text and then other things and i like pit what is happening im not sure what to type.</p>

    </li>
  </ul>
</section>

宽度随屏幕变化但高度不匹配。

此外，如果带有文本的li元素也可以垂直居中，那将是非常棒的。但我的问题是如何才能使高度与宽度相匹配？ FIddle

如果可能的话，我想只用css来做这件事。

Answer 1

使用45vw而不是45%来表示宽度和高度;

45vw表示视口宽度的45％;

如果你想为你的li增加更多的自定义宽度，你可以使用css cal（）：https://css-tricks.com/a-couple-of-use-cases-for-calc/

来修补更多信息

编辑的代码将是：

li {
  list-style:none;
  float:left;
  width:90%;
  margin:5%;
  background-color:#000;
  color:#bdc3c7;
  margin:5%;
}


img {max-width:90%;}



@media screen and (min-width: 480px) {
  li {
    float:left;
    width:45vw;
    height:45vw;
      margin:2.5%;
  }

}

<section>
  <ul id="gallery">
    <li>
      <h3>Logo </h3>
      <img src="https://s2.graphiq.com/sites/default/files/2307/media/images/t2/Deep_Sky_Blue_429606_i0.png" id="small_img">
    </li>
    <li>
      <h3>Description </h3>
      <p id="profile_des">This is some text and more text and then other things and i like pit what is happening im not sure what to type.</p>

    </li>
  </ul>
</section>

Answer 2

解决方案基本上存在两个问题。

li的高度没有开始，因为你没有任何容器/父元素的高度来计算百分比。
45％的宽度和高度永远不会相同。

如果是我，我会做一些小jQuery来修复它。它可以很容易地完成：fiddle

它使用$(window).load确保在计算所有li项高度之前加载所有内容并保存最大的项目然后给所有li元素赋予最大值，如下所示：

var biggestHeight = 0;
var thisHeight;

$('#gallery > li').each(function () {
  thisHeight = $(this).outerHeight();
  if (thisHeight > biggestHeight) {
    biggestHeight = thisHeight;
  }
});

$('#gallery > li').each(function () {
  $(this).outerHeight(biggestHeight);
});

<强>更新如果它也适用于窗口大小调整，请使用min-height而不是height，并在实际调整大小时重置min-height并再次运行相同的函数。这是更新后的fiddle

使用此调整大小功能：

$(window).resize(function () {

  var biggestHeight = 0;
  var thisHeight;

  $('#gallery > li').each(function() {
    $(this).css('min-height', 0);
  });

  $('#gallery > li').each(function () {
    thisHeight = $(this).outerHeight();
    if (thisHeight > biggestHeight) {
      biggestHeight = thisHeight;
    }
  });

  $('#gallery > li').each(function () {
    $(this).css('min-height', biggestHeight);
  });
});

UPDATE 2：，我会使用另一个html结构的动态行数，我的列表中还有一个级别。通过这种方式，我们可以遍历每一行（第一个<li>元素），并让孩子在相同的高度。

我将列表结构更改为：

<ul>
  <li>
     <ul>
        <li></li>
        <li></li>
     </ul>
  </li>
  <li>
     <ul>
        <li></li>
        <li></li>
     </ul>
  </li>
  <li>
     <ul>
        <li></li>
        <li></li>
     </ul>
  </li>
</ul>

并将jQuery函数更改为：

$('#gallery > li').each(function () {
  thisHeight = $(this).outerHeight();
  $(this).find(' > ul > li').each(function() {
    $(this).css('min-height', thisHeight);
  });
});

Here is a working example

Answer 3

li {
  list-style:none;
  display:inline-block;
  width:90%;
  background-color:#000;
  color:#bdc3c7;
  margin:15px;
}


img {max-width:90%;}



@media screen and (min-width: 480px) {
  ul {
     display:table-row;
  }
  li {
    display:table-cell;
    width:45%;
    height:100%;
    border:15px solid white;
    padding:15px;
    vertical-align:middle;
  }

}

<section>
  <ul id="gallery">
    <li>
      <h3>Logo </h3>
      <img src="https://s2.graphiq.com/sites/default/files/2307/media/images/t2/Deep_Sky_Blue_429606_i0.png" id="small_img">
    </li>
    <li>
      <h3>Description </h3>
      <p id="profile_des">This is some text and more text and then other things and i like pit what is happening im not sure what to type.</p>

    </li>
  </ul>
</section>

Answer 4

您可以使用vh或vw单位作为宽度和高度。

使<li>元素的高度与其宽度匹配

4 个答案: