使内联块元素的网格响应调整大小

Question

我目前正在以下网站上工作： http://hmdesign.alpheca.uberspace.de/

如您所见，我已经设法创建了一个包含 div.project 个项目元素的列表。由于使用了行内块，它还减少了调整 window 大小时的列数。我现在想要完成的是，当您调整 window 大小时，元素在一定范围内（最小宽度和最大宽度之间）缩放 up/down 直到达到 maximum/minimum然后它 removes/creates 一列。现在的问题是，去掉一个柱子后，有一个巨大的空隙。在那种情况下仍然显示 3 个较小的列而不是 2 个大列会更聪明。

我已经尝试过使用 flexbox 并没有真正帮助，并且还使用块元素而不是 inline-block 并将它们浮动到左侧。然后调整大小有效，但我也希望整个事情居中（就像现在一样），我还没有找到处理浮动元素的方法。

相关代码如下：

HTML:

<div class="content-wrapper">
            <div class="project-list">
                <div class="project-item">
                    <a href="#">
                        <img class="project-image" src="res/img/Placeholder.jpg">
                        <div class="project-overlay">
                            <div class="project-desc">
                                <span class="project-title"></span>
                                <span class="project-text"></span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="project-item"...

CSS:

/* Wrapper */
div.nav-wrapper, div.content-wrapper {
    max-width: 1280px;
    padding: 0 25px;
    position: relative;
    margin: 0 auto;
    height: 100%;
}

/* Portfolio Projektliste */
div.project-list {
    padding-top: 150px;
    max-width: 1300px;
    margin: 0 10px;
    text-align: center;
    font-size: 0;
}

/* Projekt Item */
div.project-item {
    display: inline-block;
    position: relative;

    width: 400px;
    height: auto;
    margin: 10px;
    overflow: hidden;
}

div.project-item:after {
    padding-top: 56.25%;
    /* 16:9 ratio */
    display: block;
    content: '';
}

img.project-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    max-width: 100%;
}

div.project-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: black;
    opacity: 0;
}

Answer 1

您可以设置 div.project-item 的宽度而不是固定宽度 (px)

例如

div.project-item{
    width: 30%;
}

因此，当您调整 window 的大小时，它会自动调整。

如果在某些时候你只想显示两个，你可以使用 medias

例如

@media (max-width: 920px){
    div.project-item{
        width: 45%;
    }
}

Answer 2

我同意 Yandy 的观点。

尝试将您的 div.project-item 宽度更改为 40%（这是当它显示两个 div 时）。像这样：

div.project-item {
display: inline-block;
position: relative;

width: 40%;
height: auto;
margin: 10px;
overflow: hidden;
}

然后添加此代码：

@media only screen and (min-width: 1347px) {
div.project-item {
    width:31%
}
}

@media only screen and (max-width: 926px) {
div.project-item {
    width:75%
}
}

所有宽度百分比都可以根据您的项目选择。 926px 的是单人div，1347px 的是三人div。

使内联块元素的网格响应调整大小

Make a grid of inline-block elements respond to resize

html

css

css-float