如何将 div 与父级 div 对齐?
How to align div to parent div?
假设我们有 4 个 dives。
第一个 div 是外部 div。
我想创建一个 HTML
第二个 div 大小是第一个的 50% 并且在第一个 div 的中间底部。
第三个 div 大小是第二个的 50%,并且在第二个 div 的中间左侧。
第四个 div 尺寸是第三个 div 的 50% 并且在第三个 div.
的中间顶部
我该怎么做?
这是您想要的输出吗?它是使用 position
、top
和 bottom
以及 translate
制作的,以确保它居中。
.div1 div { /* makes every small div 50% the size of the previous */
width: 50%;
height: 50%;
}
.div1 {
width: 200px;
height: 200px;
background-color: red;
}
.div2 {
background-color: green;
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
.div3 {
background-color: pink;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.div4 {
background-color: lightblue;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
</div>
</div>
</div>
</div>
你也可以使用flex
(或网格)和margin
代替position :
div {
display: flex;
}
body>div {
/* sizing : whatever you want to start from */
height: 90vmin;
width: 90vmin;
background: #ed1c24;
}
div div {
height: 50%;
width: 50%;
}
div div {
background: #22b14c;
margin: auto auto 0;
}
div div div {
background: #ffaec9;
margin: auto auto auto 0;
}
div div div div {
background: #00a2e8;
margin: 0 auto auto;
}
/* center the demo */
html {
display: flex;
height: 100vh;
}
body {
margin: auto;
}
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
我们可以通过使用 CSS Flexbox 和 Margin 属性来实现。
index.html
<body>
<div class="firstdiv">
<div class="seconddiv">
<div class="thirddiv">
<div class="fourthdiv">
</div>
</div>
</div>
</div>
</body>
styles.css
div {
display: flex;
}
.firstdiv {
background-color: red;
width: 600px;
height: 600px;
}
.seconddiv {
background-color: green;
width: 50%;
height: 50%;
margin: auto;
margin-bottom: 0;
}
.thirddiv {
background-color: pink;
width: 50%;
height: 50%;
margin: auto;
margin-left: 0;
}
.fourthdiv {
background-color: blue;
width: 50%;
height: 50%;
margin: auto;
margin-top: 0;
}
您可以使用下面的 CSS flexbox。下面有四个 div,您可以更改第一个 div 的大小。然后其他人会自动对齐并调整自己的大小。
HTML 文件:
<html>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
<p>Text</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS 文件:
* {
margin: 0;
padding: 0;
}
#first {
background: #ed1c24;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: flex-end;
margin: auto;
}
#second {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background: #22b14c;
width: 50%;
height: 50%;
margin: 0 auto;
}
#third {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
background: #ffaec9;
width: 50%;
height: 50%;
}
#fourth {
display: flex;
justify-content: center;
align-items: center;
background: #00a3e9;
width: 50%;
height: 50%;
}
点击查看这几行代码的结果:
Result
假设我们有 4 个 dives。 第一个 div 是外部 div。 我想创建一个 HTML 第二个 div 大小是第一个的 50% 并且在第一个 div 的中间底部。 第三个 div 大小是第二个的 50%,并且在第二个 div 的中间左侧。 第四个 div 尺寸是第三个 div 的 50% 并且在第三个 div.
的中间顶部我该怎么做?
这是您想要的输出吗?它是使用 position
、top
和 bottom
以及 translate
制作的,以确保它居中。
.div1 div { /* makes every small div 50% the size of the previous */
width: 50%;
height: 50%;
}
.div1 {
width: 200px;
height: 200px;
background-color: red;
}
.div2 {
background-color: green;
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
.div3 {
background-color: pink;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.div4 {
background-color: lightblue;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
</div>
</div>
</div>
</div>
你也可以使用flex
(或网格)和margin
代替position :
div {
display: flex;
}
body>div {
/* sizing : whatever you want to start from */
height: 90vmin;
width: 90vmin;
background: #ed1c24;
}
div div {
height: 50%;
width: 50%;
}
div div {
background: #22b14c;
margin: auto auto 0;
}
div div div {
background: #ffaec9;
margin: auto auto auto 0;
}
div div div div {
background: #00a2e8;
margin: 0 auto auto;
}
/* center the demo */
html {
display: flex;
height: 100vh;
}
body {
margin: auto;
}
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
我们可以通过使用 CSS Flexbox 和 Margin 属性来实现。
index.html
<body>
<div class="firstdiv">
<div class="seconddiv">
<div class="thirddiv">
<div class="fourthdiv">
</div>
</div>
</div>
</div>
</body>
styles.css
div {
display: flex;
}
.firstdiv {
background-color: red;
width: 600px;
height: 600px;
}
.seconddiv {
background-color: green;
width: 50%;
height: 50%;
margin: auto;
margin-bottom: 0;
}
.thirddiv {
background-color: pink;
width: 50%;
height: 50%;
margin: auto;
margin-left: 0;
}
.fourthdiv {
background-color: blue;
width: 50%;
height: 50%;
margin: auto;
margin-top: 0;
}
您可以使用下面的 CSS flexbox。下面有四个 div,您可以更改第一个 div 的大小。然后其他人会自动对齐并调整自己的大小。
HTML 文件:
<html>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
<p>Text</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS 文件:
* {
margin: 0;
padding: 0;
}
#first {
background: #ed1c24;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: flex-end;
margin: auto;
}
#second {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background: #22b14c;
width: 50%;
height: 50%;
margin: 0 auto;
}
#third {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
background: #ffaec9;
width: 50%;
height: 50%;
}
#fourth {
display: flex;
justify-content: center;
align-items: center;
background: #00a3e9;
width: 50%;
height: 50%;
}
点击查看这几行代码的结果: Result