CSS 高度等于宽度答案

【问题标题】：CSS height equal to widthCSS 高度等于宽度
【发布时间】：2014-11-11 10:48:03
【问题描述】：

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

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

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

只使用 css，不使用 JS

例子：

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

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

【问题讨论】：

Height equal to dynamic width (CSS fluid layout) 或 stackoverflow.com/questions/1495407/… 的可能副本
是的，我读过，但我只需要使用 CSS，不需要 JS。
两个链接都提供纯 CSS 解决方案。
你也可以这样做：jsfiddle.net/og8h2x5n
不完全...我成功地将它们按照我想要的方式放置，这里的问题是，我需要隐藏所有未放置在 2 行中的块...

标签： html css responsive-design grid-layout aspect-ratio

【解决方案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>

【讨论】：

【解决方案2】：

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

.a_block {
    height: 64px;
}

也可以使用padding 而不是margin，除非您将margin 值添加到.block_list 的height 中

【讨论】：

但是根据这个解决方案，如果响应块为 64px，就会有超过 2 行...我在任务中添加了图像。
好的，但是它们是响应式的，所以如果高度为 128px，那么只有 1 行，因为： min-width: 64px;最大宽度：128px；宽度：23%；它们是动态的，因为高度随着宽度而变化
@Simha 您可以限制它们的高度或内容...或者如果它们变成 128 像素，则让它成为一行...如果您想要一个好的答案，请尝试在 Jsfiddle 中制作... ://

【解决方案3】：

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

【讨论】：

ammm... 不，我的意思是我需要显示的不是所有项目，我需要显示，例如，如果只放置 6 个块，则只显示 2 行，所以我将只显示 6 个块其他将被隐藏。我只想使用 css 来做到这一点