带有图像的网格布局

Question

grid layout with imges

我正在尝试使用 HTML 和 CSS 为图像构建此网格布局。

我想使用 div 而不是 table，但我不确定最好的方法是什么。我还需要在每张图片下方添加简短的描述。

Answer 1

我使用浮动和

padding-bottom

制作了这个简单的响应式布局。

padding 底部用于模拟元素的高度。

这对您来说可能是一个良好的开始。如果您想进一步了解更多信息，例如在这些方块内添加响应式图像/文本，我建议您查看 响应式方块网格。它详细描述了一种实现具有居中内容的响应式正方形网格的方法。

div {
  float: left;
}
div > div {
  background: #2C3E50;
}
#big_wrap, #small_wrap {
  width: 50%;
}
#big_wrap > div {
  width: 48%;
  padding-bottom: 48%;
  margin: 1%;
}
#small_wrap > div {
  width: 31.333%;
  padding-bottom: 31.333%;
  margin: 1%;
}

<div id="big_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div id="small_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

小提琴

Answer 2

使用此布局：-

HTML

<div class="main">

<div class="child">
    <div class="left">
        <div class="four"></div>
        <div class="four"></div>
    </div>

    <div class="left">
        <div class="four"></div>
        <div class="four"></div>
    </div>
</div>

<div class="child">
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
</div>

CSS

.main {
width:100%;
float:left;
height:1%;
}
.child {
    width:50%;
    float:left;
}
.four {
    width: 96%;
    float:left;
    height: 150px;
    background:#35a;
    margin: 2% 0;
}
.nine {
    width:96%;
    float:left;
    height: 100px;
    background:#35a;
    margin: 2% 0;
}
.left {
    width:50%;
    float:left;
}
.right {
    width:33%;
    float:left;
}

Answer 3

CSS：

.main-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: none;
    padding: 10px;
    width: 310px;
    height: 130px;
}
.first-for-containers {
  
}
.one-to-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(48, 61, 78);
}
.three-to-four {
    background-color: rgb(48, 61, 78);
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.element {
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border: 1px solid;
    padding: 2px 8px;
    width: 80px;
    height: 57px;

}
.elements {
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border: 1px solid;
    padding: 2px;
    width: 36px;
    height: 36px;
}
.last-nine-container{
    width: fit-content;
}
.last-nine {
    background-color: rgb(48, 61, 78);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="table.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="main-container">
        <div class="first-for-containers">
        <div class="one-to-two">
            <div class="element">1</div>
            <div class="element">2</div>
        </div>
        <div class="three-to-four">
            <div class="element">3</div>
            <div class="element">4</div>
        </div>
        </div>
        <div class="last-nine-container">
        <div class="last-nine">
        <div class="elements">5</div>
        <div class="elements">6</div>
        <div class="elements">7</div>
        <div class="elements">8</div>
        <div class="elements"></div>
        <div class="elements"></div>
        <div class="elements"></div>
        <div class="elements"></div>
        <div class="elements"></div>
        </div>
    </div>
</body>
</html>

带有图像的网格布局

问题描述投票：0回答：3

3个回答

最新问题

带有图像的网格布局

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3