CSS高度等于宽度

Question

嗨，我在容器内部有许多响应式方形块元素。 每个块都有下一个CSS：

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

例如，块的数量为30。我将它们放在容器中的一行中，因此，如果它们未放在一行中，则它们的一部分将移入下一行，依此类推。我的目标是向用户显示的对象不超过2他们的行。 我该怎么做？ PS我可以使用overflow: hidden; 属性的容器，但我不知道容器的确切高度，因为它的响应速度取决于内容块。

仅使用CSS，无需JS

例：

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

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

Answer 1

您可以这样做：

小提琴

 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-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-100-100-1.jpg" alt="" /> </div> <div> <img src="http://lorempixel.com/output/people-qg-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;
}

除非您将margin值添加到.block_list的height否则也请使用padding而不是margin