html如何将6个文本两两放在一行,分3行,且每行每列缩进对齐,使用vscode输出
时间: 2024-01-09 20:04:08 浏览: 78
输出的文本实现对齐的方法(超简单)
5星 · 资源好评率100%
你可以使用以下代码将 6 个文本两两放在一行,分 3 行,并且每行每列缩进对齐。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将6个文本两两放在一行,分3行,且每行每列缩进对齐</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
width: 30%;
margin-bottom: 20px;
padding: 0 10px;
}
.col:nth-child(odd) {
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<div class="col">文本1</div>
<div class="col">文本2</div>
<div class="col">文本3</div>
<div class="col">文本4</div>
<div class="col">文本5</div>
<div class="col">文本6</div>
</div>
</body>
</html>
```
在这个代码中,我们使用了 Flexbox 布局来实现每行两列的排列,并使用了 CSS 的 `text-align` 属性来控制奇数列的文本对齐方式。同时,我们使用了 `padding` 属性来控制每列的缩进。
阅读全文