Question

我有一个html列表，其中包含多个项目，每个项目都由一些文本和一个图像组成。我想要以下内容：

所有项目必须适合一页（无滚动条）
每个项目必须具有相同的高度（调整图像大小以适合项目高度）
图像必须使用项目列表中的剩余空间，而不是文本

编辑：所以为了清楚，假设浏览器高度为X，并且有n个列表项（li），每个li应该具有X / n像素的高度，以便它们都适合浏览器高度而不任何滚动条。从那里，在每个li里面，文本应该占用它需要的任何空间，图像应该填充剩余的空间

我尝试过玩高度＆amp;最大高度，但它似乎不起作用。我应该更改html布局吗？

这是html代码：

<html>
<head>
<style type="text/css">

</style>

</head>
<body>
<div>

<ul>
<li>
    <div>title1</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
    <div>title2</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
    <div>title3</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
    <div>title4</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
    <div>title5</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
    <div>title6</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
    <div>title7</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
    <div>title8</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
</ul>


</div>
</body>
<html>

Answer 1

我不认为只有CSS才有可能。 JS解决方案如下所示：

document.addEventListener("DOMContentLoaded", setLiHeight);
window.addEventListener("resize", setLiHeight);

function setLiHeight() {
  let ul = document.querySelector("ul");
  let lis = ul.querySelectorAll("li");
  let title = ul.querySelector("div");
  let images = ul.querySelectorAll("img");

  // Set height for lis
  Array.from(lis, function(li) {
    li.style.height = ul.offsetHeight / lis.length - 1 + "px";
  });
  
  // Set height for images according to height title
  Array.from(images, function(img) {
    img.style.height = ul.offsetHeight / lis.length - title.offsetHeight + "px";
  });
}

html,
body {
  margin: 0;
}

ul {
  height: 100vh;
  margin: 0;
}

li img {
  width: auto;
}

<ul>
  <li>
    <div>title1</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </li>
  <li>
    <div>title2</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </li>
  <li>
    <div>title3</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </li>
  <li>
    <div>title4</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </li>
  <li>
    <div>title5</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </li>
  <li>
    <div>title6</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </li>
  <li>
    <div>title7</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </li>
  <li>
    <div>title8</div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  </li>
</ul>

这里唯一的假设是列表的高度是固定的。

在一个页面中安装列表并保持项目比率

1 个答案: