Question

嗨我在容器内部有多个响应方块元素。每个块都有下一个css：

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

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

只使用css，不使用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>

Answer 2

您可以在javascript中执行此操作。如果你有30个块，那么一行最多有15个块，计算前15个块的宽度，并将行的宽度设置为它们的总和。这会使它在X方向上溢出，因此用户必须滚动才能查看隐藏的内容。

Answer 3

.block_list {
    width: 100%;
    max-height: 128px;
    overflow-y: hidden;
}

.a_block {
    height: 64px;
}

除非您将padding值添加到margin margin

，否则请使用.block_list而不是height

CSS高度等于宽度

3 个答案: