gpt4 book ai didi

html - 我需要一些 12 div 的排列。我可以使用 HTML、CSS。我会展示代码和安排

转载 作者:太空宇宙 更新时间:2023-11-04 01:42:15 25 4
gpt4 key购买 nike

我需要 12 个 div 的特定排列。我正在尝试,但我做不到。我将展示我们的代码和安排。如果可以,请帮助我。

12个div的排列方式:

the arrangement of 12 divs

我给了他们宽度和高度的百分比,但它不起作用。我会展示代码。

我的代码:

.gallery {
width: 100%;
height: 800px;
padding: 0px;
margin: 0px;
overflow: auto;
}

.gallery div {
border: 1px solid black;
margin: 0px !important;
float: left;
}

.one {
width: 21.42%;
height: 25% ;
display: inline-block;
}

.two {
width: 14.28%;
height: 25%;
display: inline-block;
}

.tree {
width: 64.26%;
height: 37.5%;
display: inline-block;
}

.fore {
width: 14.28%;
height: 50%;
display: inline-block;
}

.five {
width: 14.28%;
height: 75%;
display: inline-block;
}

.six {
width: 7.14%;
height: 37.5%;
display: inline-block;
}

.seven {
width: 21.42%;
height: 25%;
display: inline-block;
}

.eight {
width: 14.28%;
height: 65.5%;
display: inline-block;
}

.nine {
width: 28.56%;
height: 37.5%;
display: inline-block;
}

.ten {
width: 14.28%;
height: 25%;
display: inline-block;
}

.eleven {
width: 28.56%;
height: 37.5%;
display: inline-block;
}

.twelve {
width: 28.56%;
height: 25%;
display: inline-block;
}
<div class="container gallery">
<div class="one"></div>
<div class="two"></div>
<div class="tree"></div>
<div class="fore"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
<div class="nine"></div>
<div class="ten"></div>
<div class="eleven"></div>
<div class="twelve"></div>
</div>

最佳答案

这是一个工作示例 jsfiddle

HTML:

<div class="container gallery">
<div class="one"></div>
<div class="two"></div>
<div class="tree"></div>
<div class="fore"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
<div class="nine"></div>
<div class="ten"></div>
<div class="eleven"></div>
<div class="twelve"></div>
</div>

CSS:

html, body, .container
{
height: 100%;
min-height: 100%;
margin: 0
}

.one {
float: left;
width: calc((100% * 3) / 14);
height: calc((100% * 2) / 8);
background-color: red;
}

.two{
float: left;
width: calc((100% * 2) / 14);
height: calc((100% * 2) / 8);
background-color: green;
}

.tree{
float: right;
width: calc((100% * 9) / 14);
height: calc((100% * 3) / 8);
background-color: blue;
}

.fore{
float: left;
width: calc((100% * 2) / 14);
height: calc((100% * 4) / 8);
background-color: blue;
}

.five{
float: left;
width: calc((100% * 2) / 14);
height: calc((100% * 2) / 8);
background-color: #DDDDDD;
position: absolute;
left: 0;
bottom: 0
}

.six{
float: left;
width: calc((100% * 2) / 14);
height: calc((100% * 6) / 8);
background-color: yellow;
}

.seven{
float: left;
width: calc((100% * 1) / 14);
height: calc((100% * 3) / 8);
background-color: brown;
}

.eight{
float: left;
width: calc((100% * 3) / 14);
height: calc((100% * 2) / 8);
background-color: cyan;
}

.nine{
float: left;
width: calc((100% * 4) / 14);
height: calc((100% * 3) / 8);
background-color: magenta;
position: absolute;
bottom: 0;
left: calc((100% * 4) / 14);
}

.ten{
float: left;
width: calc((100% * 2) / 14);
height: calc((100% * 5) / 8);
background-color: purple;
}

.ten{
float: left;
width: calc((100% * 2) / 14);
height: calc((100% * 5) / 8);
background-color: purple;
}

.eleven{
float: left;
width: calc((100% * 4) / 14);
height: calc((100% * 3) / 8);
background-color: gray;
}

.twelve{
float: left;
width: calc((100% * 4) / 14);
height: calc((100% * 2) / 8);
background-color: teal;
}

更新

上面的代码是 100% 响应的,这意味着它在任何浏览器或屏幕尺寸下看起来都很棒

关于html - 我需要一些 12 div 的排列。我可以使用 HTML、CSS。我会展示代码和安排,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45200992/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com