CSS - 如何水平对齐我的div？
我是一名HTML / CSS初学者，他想创建四个彩色盒子，水平对齐。我能够单独构建这四个盒子。然而，我必须对方框2-4进行评论，因为它们相互重叠。这个社区中有人能解决我的新问题吗？
div最终应该如下图所示：
这是我的代码：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
}
#box-grey {
background-color: grey;
height: 200px;
width: 200px;
}
#box-grey #box-orange {
background-color: orange;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
fixed: 100px;
left: 100px;
}
/*
#box-black {
background-color: black;
height: 200px;
width: 200px;
}
#box-black #box-yellow {
background-color: yellow;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 100px;
left: 100px;
}
#box-blue {
background-color: blue;
height: 200px;
width: 200px;
}
#box-blue #box-green {
background-color: green;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 100px;
right: 0px;
}
#box-purple {
background-color: purple;
width: 200px;
height: 200px;
}
#box-purple #box-pink {
background-color: pink;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 0px;
right: 0px;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div id="box-grey">
<div id="box-orange"</div>
</div>
<div id="box-black">
<div id="box-yellow"</div>
</div>
<div id="box-blue">
<div id="box-green"</div>
</div>
<div id="box-purple">
<div id="box-pink"</div>
</div>
</body>
</html>
11 个答案:
答案 0 :(得分：3)
这是没有现代css3 grid和flex能力的常见解决方案。我们可以为包装框设置display: inline-block和position: relative，之后我们为内框设置position: absolute并将它们定位到角落。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
min-width: 840px;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
}
.box-inner {
height: 50%;
width: 50%;
position: absolute;
}
#box-grey {
background-color: grey;
}
#box-grey #box-orange {
background-color: orange;
right: 0;
top: 0;
}
#box-black {
background-color: black;
}
#box-black #box-yellow {
background-color: yellow;
bottom: 0;
right: 0;
}
#box-blue {
background-color: blue;
}
#box-blue #box-green {
background-color: green;
bottom: 0;
left: 0;
}
#box-purple {
background-color: purple;
}
#box-purple #box-pink {
background-color: pink;
top: 0;
left: 0;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div id="box-grey" class="box">
<div id="box-orange" class="box-inner"></div>
</div>
<div id="box-black" class="box">
<div id="box-yellow" class="box-inner"></div>
</div>
<div id="box-blue" class="box">
<div id="box-green" class="box-inner"></div>
</div>
<div id="box-purple" class="box">
<div id="box-pink" class="box-inner"></div>
</div>
</body>
</html>
答案 1 :(得分：2)
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 1em;
}
#box-1,
#box-2,
#box-3,
#box-4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 200px;
width: 200px;
}
#box-1 {
background-color: grey;
}
#box-2 {
background-color: black;
}
#box-3 {
background-color: blue;
}
#box-4 {
background-color: purple;
}
#box-grey {
background-color: grey;
}
#box-orange {
background-color: orange;
}
#box-black {
background-color: black;
}
#box-blue {
background-color: blue;
}
#box-purple {
background-color: purple;
}
#box-yellow {
background-color: yellow;
}
#box-green {
background-color: green;
}
#box-pink {
background-color: pink;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div id="container">
<div id="box-1">
<div></div>
<div id="box-orange">
</div>
</div>
<div id="box-2">
<div></div>
<div></div>
<div></div>
<div id="box-yellow"></div>
</div>
<div id="box-3">
<div></div>
<div></div>
<div id="box-green"></div>
</div>
<div id="box-4">
<div id="box-pink"></div>
</div>
</div>
</body>
</html>
使用CSS网格方法！更容易理解！
答案 2 :(得分：1)
您的代码存在问题。你有很多未闭合的<div>。试试这段代码。
body {}
.box-wrap {
display: flex;
}
#box-grey {
background-color: grey;
height: 200px;
width: 200px;
position: relative;
}
#box-grey #box-orange {
background-color: orange;
height: 50%;
width: 50%;
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
#box-black {
background-color: black;
height: 200px;
width: 200px;
position: relative;
}
#box-black #box-yellow {
background-color: yellow;
height: 50%;
width: 50%;
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
}
#box-blue {
background-color: blue;
height: 200px;
width: 200px;
position: relative;
}
#box-blue #box-green {
background-color: green;
height: 50%;
width: 50%;
display: inline-block;
position: absolute;
bottom: 0;
left: 0px;
}
#box-purple {
background-color: purple;
width: 200px;
height: 200px;
position: relative;
}
#box-purple #box-pink {
background-color: pink;
height: 50%;
width: 50%;
display: inline-block;
position: absolute;
;
top: 0px;
left: 0px;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div class="box-wrap">
<div id="box-grey">
<div id="box-orange"></div>
</div>
<div id="box-black">
<div id="box-yellow"></div>
</div>
<div id="box-blue">
<div id="box-green"></div>
</div>
<div id="box-purple">
<div id="box-pink"></div>
</div>
</div>
</body>
</html>
答案 3 :(得分：1)
要使框水平对齐，一个非常简单的解决方案是在所有框上设置float:left。如果屏幕不够宽，无法全部水平显示，那么那些不适合的屏幕将自动推到下一行。
为了在你的代码中实现这一点，我在所有外部div上放置了一个名为“outer-box”的类，然后在CSS中设置一个规则，使得具有此类的所有元素都将向左浮动。这会阻止它们成为块级元素（即块级元素，它们总是会启动新行）。
有关浮动的更深入的文档，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/float。
body {}
.outer-box {
float: left;
}
#box-grey {
background-color: grey;
height: 200px;
width: 200px;
}
#box-grey #box-orange {
background-color: orange;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
fixed: 100px;
left: 100px;
}
#box-black {
background-color: black;
height: 200px;
width: 200px;
}
#box-black #box-yellow {
background-color: yellow;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 100px;
left: 100px;
}
#box-blue {
background-color: blue;
height: 200px;
width: 200px;
}
#box-blue #box-green {
background-color: green;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 100px;
right: 0px;
}
#box-purple {
background-color: purple;
width: 200px;
height: 200px;
}
#box-purple #box-pink {
background-color: pink;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 0px;
right: 0px;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div id="box-grey" class="outer-box">
<div id="box-orange"></div>
</div>
<div id="box-black" class="outer-box">
<div id="box-yellow"></div>
</div>
<div id="box-blue" class="outer-box">
<div id="box-green"></div>
</div>
<div id="box-purple" class="outer-box">
<div id="box-pink"></div>
</div>
</body>
</html>
答案 4 :(得分：0)
尝试使用此css
#box-grey {
background-color: grey;
height: 200px;
width: 200px;
float:left;
margin:10px;
}
#box-grey #box-orange {
background-color: orange;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
float:left;
left: 100px;
}
#box-black {
background-color: black;
height: 200px;
width: 200px;
float:left;
margin:10px;
}
#box-black #box-yellow {
background-color: yellow;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 100px;
left: 100px;
float:left;
}
#box-blue {
background-color: blue;
height: 200px;
width: 200px;
float:left;
margin:10px;
}
#box-blue #box-green {
background-color: green;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 100px;
right: 0px;
float:left;
}
#box-purple {
background-color: purple;
width: 200px;
height: 200px;
float:left;
margin:10px;
}
#box-purple #box-pink {
background-color: pink;
height: 50%;
width: 50%;
display: inline-block;
position: relative;
top: 0px;
right: 0px;
float:left;
}<div id="box-grey">
<div id="box-orange"></div>
</div>
<div id="box-black">
<div id="box-yellow"></div>
</div>
<div id="box-blue">
<div id="box-green"></div>
</div>
<div id="box-purple">
<div id="box-pink"></div>
</div>
答案 5 :(得分：0)
我已经在div中添加了类来更好地管理代码。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {}
.outerbox {
display: inline-block;
height: 100px;
width: 24%;
position: relative;
}
.innerbox {
height: 50px;
width: 50px;
position: absolute;
}
#box-grey {
background-color: grey;
}
#box-grey #box-orange {
background-color: orange;
right: 0;
top: 0;
}
#box-black {
background-color: black;
}
#box-black #box-yellow {
background-color: yellow;
right: 0;
bottom: 0;
}
#box-blue {
background-color: blue;
}
#box-blue #box-green {
background-color: green;
left: 0;
bottom: 0;
}
#box-purple {
background-color: purple;
}
#box-purple #box-pink {
background-color: pink;
top: 0;
left: 0;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div id="box-grey" class="outerbox">
<div id="box-orange" class="innerbox"></div>
</div>
<div id="box-black" class="outerbox">
<div id="box-yellow" class="innerbox"></div>
</div>
<div id="box-blue" class="outerbox">
<div id="box-green" class="innerbox"></div>
</div>
<div id="box-purple" class="outerbox">
<div id="box-pink" class="innerbox"></div>
</div>
</body>
</html>
答案 6 :(得分：0)
答案 7 :(得分：0)
使用flexbox的示例
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.parent {
display: flex;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
}
.child:nth-child(1) {
background-color: pink;
}
.child:nth-child(2) {
background-color: green;
}
.child:nth-child(3) {
background-color: blue;
} <div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
答案 8 :(得分：0)
水平框可以通过多种方式完成。
-
您可以在框类上使用float：left或显示：inline-block
.box { float: left; // comment out this or display: inline-block display: inline-block; // comment out this or float: left height: 200px; width: 200px; position: relative; } .box.grey { background-color: #808080; } .box.black{ background-color: #000000; } .box.blue{ background-color: #0000FF; } .box.purple{ background-color: #810081; } .inner-box{ position: absolute; } .inner-box.orange{ top: 0; right: 0; background-color: #FFA600; } .inner-box.yellow{ bottom: 0; right: 0; background-color: #FFFF00; } .inner-box.green{ bottom: 0; left: 0; background-color: #008100; } .inner-box.pink{ top: 0; left: 0; background-color: #FFC0CB; } -
您可以将box div包装在另一个包装器中并使用flexbox
.boxes { 显示：flex; 弯曲方向：行; }
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Boxes</title>
</head>
<body>
<div class="box grey">
<div class="inner-box orange"></div>
</div>
<div class="box grey">
<div class="inner-box yellow"></div>
</div>
<div class="box blue">
<div class="inner-box green"></div>
</div>
<div class="box purple">
<div class="inner-box pink"></div>
</div>
</body>
</html>
我还建议使用类而不是id，除非你在某个时候用js计划和影响dom
答案 9 :(得分：-1)
在{body}或{*}上试用以申请所有div元素： -
body
{
margin: auto;
vertical-align: center;
text-align: center;
}
//if you apply on this div only
#box-blue
{
background-color: blue;
height: 200px;
width: 200px;
margin: auto;
vertical-align: center;
text-align: center;
}
你能否应用这些代码并告诉我结果，它适合你。
答案 10 :(得分：-1)
随着雅利安人的额外“阶级”，我终于可以获得理想的结果了！添加了 margin：right 5px; 以获得正确的框之间的间距。问题解决了 - 谢谢！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？