Question

我尝试在li标签上设置 max-height 百分比但似乎不起作用（目前在Chrome / Mac中有效），但设置为像素有效。

我需要使用浏览器维度来扩展项目，这就是我需要以百分比工作的原因。

HTML

    <div class="portfolio_items">
        <div id="slideshow">
            <ul>
                <li><img src="images/_test/_scroll1.jpg" alt="" class="active" /></li>
            <li><img src="images/_test/_scroll2.jpg" alt="" /></li>
            <li><img src="images/_test/_scroll3.jpg" alt="" /></li>
            <li><img src="images/_test/_scroll4.jpg" alt="" /></li>

            <li><h1><?php the_title(); ?></h1>
                    <h2>Client: Test</h2>
                    <h2>Agency: <a href="#">...</h2>
                    <a href="#" target="_blank">Visit site</a></li>
                </ul>
            </div><!-- slideshow END -->

        <img src="images/_test/project-viewer.jpg">
            </div><!-- portfolio_items END -->

CSS

#slideshow {
    position:relative;
    max-width: 900px;
    }
#slideshow ul {
    float: left;
    margin-top: 3.7%;
    }
#slideshow li {
    background: aqua;
    position:absolute;
    max-width: 900px;
    width: 92.12%;
    margin-left: 4.3%;
    z-index:8;
    }
#slideshow li.active {
    z-index:10;
    }
#slideshow li.last-active {
    z-index:9;
    }

* 直播示例：* http://www.warface.co.uk/clients/warface.co.uk/testv2

- 编辑 - 所需的效果，蓝色框将覆盖显示器显示

Answer 1

试试这个：

#slideshow {
position:relative;
max-width: 900px;
width: 100%;
}

希望它有效。

max-height％在所有浏览器中都不起作用

1 个答案: