html - CSS 高度等于宽度

Question

您好，我在容器内有许多响应式方 block 元素。每个 block 都有下一个 css:

.thumbWrapper {
 display: inline-block;
 min-width: 64px;
 max-width: 128px;
 width: 23%;
 margin: 2px;
 position: relative;
 z-index: 15;
}

block 数，例如 30。我将它们排成一排放在容器中，所以如果它们不是排成一行，则其中一部分会移到下一行等等。我的目标是向用户显示 no超过 2 行。我该怎么做？附言我可以为容器使用 overflow: hidden; 属性，但我不知道容器的确切高度，因为它的响应取决于内容 block 。

Using just css, without JS

例子:

-----------------------
 __  __  __  __
 |_| |_| |_| |_|
 __  __  __  __
 |_| |_| |_| |_|
 __  __  __ 
 |_| |_| |_|                      <------------- This row should be hidden!

-----------------------

Answer 1

你可以这样做:

fiddle

body, html {
    height:100%;
    margin:0;
}
.wrap1 {
    height:0;
    padding-bottom:46%;
    position:relative;
}
.wrap2 {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    max-height:264px;
    min-height:136px;
    overflow:hidden;
}
.wrap2 div {
    display: inline-block;
    min-width: 64px;
    max-width: 128px;
    width: 23%;
    margin: 2px;
    position: relative;
    z-index: 15;
    background:teal;
}
div>img {
    width:100%;
    height:auto;
    display:block;
}

<div class="wrap1">
    <div class="wrap2">
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
    </div>
</div>