html - 容器的 CSS 位置和动态高度

Question

您希望容器在单击下一步时缩小或扩大？我在这里创建了一个小提琴：http: //jsfiddle.net/agriz/nS8M3/1/
我被迫为这两个元素提供高度<div class="slider"> <ul>

我想为这两个容器设置自动高度。如果我们混合相对位置和绝对位置，是否可以为容器设置动态高度？

我在 SO 中搜索并找到了这个：http: //jsfiddle.net/ambiguous/zVBDc/

这里的容器也有 CSS 中的 height 属性。

HTML 部分

<div class="slider">
  <ul>
    <li class="active"><img src="http://i41.tinypic.com/10rok86.jpg" class="slider_img" />  </li>
    <li><img src="http://i40.tinypic.com/f0rfag.jpg" class="slider_img" /></li>
  </ul>
</div>

<div class="toolbars">
  <button onClick="window.slider.previous()">Previous</button>
  <button onClick="window.slider.next()">Next</button>
</div>

我希望容器在单击下一步时缩小或扩大（从评论中复制！）

Answer 1

请参阅小提琴以获取可能的答案。 http://jsfiddle.net/zGpKa

我对您的 CSS 进行了以下更改。

.slider li {
    position: relative;
    margin: 0;
    padding: 0;
    left: 0;
    display: none;
}