Question

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

如您所见，我已经设法创建了一个div.project-item元素列表。由于使用了内联块，因此在调整窗口大小时也会减少列数。我现在想要完成的是，当你调整窗口大小时，元素在一定范围内（在最小宽度和最大宽度之间）向上/向下缩放，直到达到最大值/最小值，然后它就会删除/创建一个柱。现在的问题是在删除列后存在巨大的空隙。在这种情况下，让我们说3个较小的列而不是2个大的列，这样会更聪明。

我已经尝试使用一个并不真正有用的flexbox，也使用块元素而不是内联块并将它们浮动到左侧。然后调整大小工作，但我也希望整个事情集中（就像现在一样），我没有找到与浮动元素有关的方法。

以下相关代码：

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）

e.g

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

因此，当您调整窗口大小时，它将进行调整。

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

e.g

@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。

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

2 个答案: