在 CSS 中对齐网格中的多个 Div,无需浮动
Alligning Multiple Divs in a Grid in CSS without Float
我一直在尝试设计一个由多个 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
,它似乎适合这种情况,但只要我添加页脚,它就会嵌入其他 类 中。我怀疑这是由于使用了浮动。如果有人可以向我展示使用或不使用浮动或什至其他一些 CSS 工具的替代方法,那将会很有帮助,但我更喜欢非 JS 解决方案和响应式解决方案。
在CSS中你需要写
.float-left {
float: left;
}
而不是
.float-left:{
float: left;
}
您必须删除多余的 :
。
这是我的做法。在你的包装器 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;
}
正如我已经说过的,您可以将 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>
您可以简单地将所有元素添加到 div 中并使用对齐属性
your_elements
如果您不想使用 float
,那是最好和最简单的方法
我一直在尝试设计一个由多个 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
,它似乎适合这种情况,但只要我添加页脚,它就会嵌入其他 类 中。我怀疑这是由于使用了浮动。如果有人可以向我展示使用或不使用浮动或什至其他一些 CSS 工具的替代方法,那将会很有帮助,但我更喜欢非 JS 解决方案和响应式解决方案。
在CSS中你需要写
.float-left {
float: left;
}
而不是
.float-left:{
float: left;
}
您必须删除多余的 :
。
这是我的做法。在你的包装器 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;
}
正如我已经说过的,您可以将 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>
您可以简单地将所有元素添加到 div 中并使用对齐属性 your_elements 如果您不想使用 float
,那是最好和最简单的方法