首页html如何将6个文本两两放在一行，分3行，且每行每列缩进对齐，使用vscode输出

html如何将6个文本两两放在一行，分3行，且每行每列缩进对齐，使用vscode输出

时间: 2024-01-09 19:04:08 浏览: 81

你可以使用以下代码将 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` 属性来控制每列的缩进。

阅读全文