Question

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

图像的CSS只是高度= 100％＆amp;宽度=汽车。

图片调整大小，但他们所坐的李元素却没有。这会导致图像变小但由于list元素而不再并排。是否有任何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容器不是： exactly what is happening！

li宽度从高处调整大小？

0 个答案: