gpt4 book ai didi

html - 无法定位 div 框

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

我正在尝试使用 HTML/CSS,但在定位方面遇到了一些困难。我想要做的是总共有 12 个盒子(3 行,每行 4 个盒子)。第一行是不同深浅的红色,第二行是不同深浅的绿色,最后一行是不同深浅的蓝色。这就是我想出的代码:

html/css:

.square {
height: 250px;
width: 250px;
border: 1px solid #fff;
}
#red > .square {
float: left;
background: #f00;
}
#green > .square {
float: left;
background: #0f0;
}
#blue > .square {
float: left;
background: #00f;
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Color Squares</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<main>
<div id="red">
<div class="square sq1"></div>
<div class="square sq2"></div>
<div class="square sq3"></div>
<div class="square sq4"></div>
</div>
<div id="green">
<div class="square sq1"></div>
<div class="square sq2"></div>
<div class="square sq3"></div>
<div class="square sq4"></div>
</div>
<div id="blue">
<div class="square sq1"></div>
<div class="square sq2"></div>
<div class="square sq3"></div>
<div class="square sq4"></div>
</div>
</main>
</body>

</html>

我稍后会更改颜色,现在我更专注于固定位置。我无法将相同颜色的框保持在同一行上。我希望第一行全是红色框,但是一些绿色框出现在第一行,一些蓝色框出现在第二行。基本上,我需要一种方法来在每一行的末尾添加一个中断,以确保每一行都由一种颜色组成。之后,我需要帮助将整个东西垂直和水平居中。我知道垂直居中对 CSS 来说有点烦人,但我什至不能正确地设置水平居中(使用 margin: auto 似乎不起作用)。非常感谢任何帮助。

最佳答案

如果添加以下 css,是否可以解决您的问题?

.sq1 {
clear: left;
}

它告诉每行中的第一个方 block 与之前的 float 流中断并开始新的一行。

更新:

要使其居中,您可以执行以下操作:

main {
position: absolute;
top: 50%;
margin-top: -378px;
left: 50%;
margin-left: -504px;
}

margin-top 是 (squareHeight + top-border-width + bottom-border-width) * 3 squares/2。 margin-left 类似。我认为以下文章解释得非常好:http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

关于html - 无法定位 div 框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27791078/

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