在没有Float的CSS中对齐网格中的多个div

Question

我一直在尝试设计一个包含多个div的网页，其中包含网格(不是CSS网格)中的图像，如下所示:

<div class="some classes"> Some Text </div> <br>
<a href="somwhere"> 
<div class="some classes float-left"> 
<img src="http://someimage" height="200px" alt="An image"/> <br> 
<div class="some other classes"> some image text </div>
</div>
</a>
<a href="somwhere"> 
<div class="some classes float-left"> 
<img src="http://someimage" height="200px" alt="An image"/> <br> 
<div class="some other classes"> some image text </div>
</div>
</a>
... many times
<footer> some footer </footer>

用CSS

.float-left {
float:left;
}

和其他CSS类只是没有任何意义的占位符。

我不知道有多少这样的div被创建，因为它是根据一些变量参数通过构建工具自动完成的。我一直在使用float:left，这似乎适合这种情况，但只要我添加一个页脚，它就嵌入到其他一些类中。我怀疑这是由于float的使用。这将是有帮助的，如果有人能告诉我一个替代的方式与或不使用浮动或甚至一些其他CSS工具，但我更喜欢一个非js解决方案和响应的解决方案。

Answer 1

就像我已经说过的，您可以将auto-fit或auto-fill与minmax结合使用来创建一个响应式网格，它不关心存在多少项。

grid-template-columns: repeat(auto-fill, minmax(minimum width value, maximum width value));

要使页脚始终位于所有图像的下方并跨越整个宽度，您可以使用:
footer { grid-column: 1 / -1; }

这种方法可以在一行中容纳尽可能多的图像或其他元素，因为屏幕适合。我在代码片段中添加了一个resize属性，这样您就可以调整元素的大小，并查看网格如何响应它:

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
footer {
grid-column: 1 / -1;
}

/* for demonstration purpose only */
.grid {
resize: horizontal;
overflow-x: auto;
border: 2px solid black;
box-sizing: border-box;
min-width: 104px;
max-width: 100%; 
}
.grid > * {
display: flex;
justify-content: center;
align-items: center;
min-height: 20vh;
color: white;
}
.grid > div:nth-of-type(3n+1) {
background-color: red;
}
.grid > div:nth-of-type(3n+2) {
background-color: darkblue;
}
.grid > div:nth-of-type(3n+3) {
background-color: darkgreen;
}
.grid > footer {
background-color: orange;
}

<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<footer>Footer</footer>
</div>

Answer 2

在CSS中你需要写

.float-left {
float: left;
} 

不是

.float-left:{
float: left;
}

你必须去掉多余的:。

Answer 3

我是这样做的。在包装器div中，您需要添加以下CSS

.wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
grid-auto-rows: 100px;
grid-template-areas:
"a b"
"c d";
align-items: start;
}

然后你可以为每一个网格的div添加这个CSS

.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}

Answer 4

您可以简单地在div中添加所有元素并使用align属性your_elements如果你不想使用float

，这是最好和最简单的方法。