1

我正在制作一个包含一个或多个图像的内联阻止列表的站点。图像应根据包含的 div 调整大小，并且应完美并排。图像位于 div 内的列表元素内。

图片的 CSS 就是 height=100% & width=auto。

图像会调整大小，但它们所在的 li 元素不会。这会导致图像变小，但由于列表元素而不再并排。是否有任何 CSS 明智或任何方法可以根据其内容的大小调整列表元素的宽度或根据其高度调整它们的大小？

还要提一下我真的很想远离JQuery。

代码：

<div id="wrapper" vertical-align="center" class="row">
<ul>
    <li><img height="100%" width="auto" src='@routes.Assets.at("ribbon_left.png")' align="center" onClick='displayText(pin" + i + ")' /></li>
    <li>
@for(p <- pins){
    <div style="position:relative"><img height="100%" width="auto" src='@routes.Assets.at("ribbon_middle.png")' class="pinImage1" align="center" onClick='displayText(pin" + i + ")' /><img height="75%" width="auto" src='@p.image.value.largestImage.get.url' class="pinImage2" align="center" onClick='displayText(pin" + i + ")' /></div></li><li>
}
    <img height="100%" width="auto" src='@routes.Assets.at("ribbon_right.png")' align="center" onClick='displayText(pin" + i + ")' /></li>
</ul>


.row
{
  height: 20%;
  overflow: auto;
  vertical-align: middle;
}

ul
{
  display: inline-block;
  list-style: none outside none;
  white-space: nowrap;
}

li
{
  display: inline-block;
  height: 100%;
  width: auto;
}

pinImage2
{
  left: 8%;
  position: absolute;
  top: 8%;
}

pinImage1
{
  left: 0;
  position: inherit;
  top: 0;
  z-index: 0;
}

例如：第一个是最大化的屏幕，第二个是一个较小的窗口并且不起作用。他们这样分离的原因是因为图像越来越小，但它们的 li 容器却没有： 到底发生了什么！

4

0 回答 0