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

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元素也可以垂直居中，那将是很棒的。 但是我的问题是如何使高度与宽度匹配？ 小提琴

如果可能的话，我想仅使用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

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

1. li的高度不会增加，因为您没有任何容器/父元素具有可计算其百分比的高度。

2. 宽度和高度的45％永远不会相同。

如果是我，我会做一些小的jQuery来修复它。 这是可以做到很容易像这样： 小提琴

它使用$(window).load来确保在我计算所有li项高度之前保存所有内容，并保存最大的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并再次运行相同的功能。 这是更新的小提琴

使用以下调整大小功能：

$(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);
  });
});

更新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);
  });
});

这是一个有效的例子

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单位用于宽度和高度。