将3个div样式化以在flex容器内正确对齐[关闭]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将3个div样式化以在flex容器内正确对齐[关闭]相关的知识，希望对你有一定的参考价值。
我有三个div标签，一个用于flex容器，其中包含：一个div用于数字，一个用于文本。基本上我希望它看起来像这样：
- 你好
- 你好
- 你好
<div className="flex-container">
<div className=styles.point>
<Point>1</Point>
</div>
<div className=styles.step>
Install the app
</div>
<div className=styles.point>
<Point>2</Point>
</div>
<div className=styles.step>
Say hello
</div>
<div className=styles.point>
<Point>4</Point>
</div>
<div className=styles.step>
Blessed
</div>
</div>
CSS
.step
color: #616161;
font-size: 14px;
width: 80%;
margin: 10px auto;
float: right;
.point
font-size: 14px;
width: 80%;
margin: 10px auto;
结果看起来像这样：
1.
2.
4. Install the app
Say hello
Blessed
未对齐:(
答案
将您的html结构更改为此。
.div-wrapper div
display: inline-block;
div:nth-child(1)
margin-right: 10px;
<div class="div-wrapper">
<div className=styles.point>
<Point>1</Point>
</div>
<div className=styles.step>
Install the app
</div>
</div>
<div class="div-wrapper">
<div className=styles.point>
<Point>2</Point>
</div>
<div className=styles.step>
Install the app
</div>
</div>
<div class="div-wrapper">
<div className=styles.point>
<Point>3</Point>
</div>
<div className=styles.step>
Install the app
</div>
</div>以上是关于将3个div样式化以在flex容器内正确对齐[关闭]的主要内容，如果未能解决你的问题，请参考以下文章