写一个Html例子,将一个背景为黄色的div,分成等高等宽的6行2列,左列的格子里填写文件“左”,文字居左,右列的格子里填写文件“右”,文字居右
时间: 2024-09-24 22:23:13 浏览: 31
当然,这里是一个基本的HTML示例,创建了一个包含两个等高等宽的列,一个用于显示文件名"左",一个用于显示文件名"右",并设置了相应的样式:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
.cell {
width: calc(50% - 10px);
box-sizing: border-box;
padding: 10px;
text-align: center;
}
.left-cell {
background-color: lightyellow;
text-align: left;
}
.right-cell {
background-color: lightgoldenrodyellow;
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<div class="cell left-cell">
文件 "左"
</div>
<div class="cell right-cell">
文件 "右"
</div>
<!-- 重复下面的代码行,按照6行2列的要求填充 -->
<!-- 更换class="left-cell" 和 "right-cell" 标签内容即可 -->
<!-- 第二行开始 -->
<div class="cell left-cell">
文件 "左"
</div>
<div class="cell right-cell">
文件 "右"
</div>
<!-- ...以此类推... -->
<!-- 最后一行结束 -->
<div class="cell left-cell">
文件 "左"
</div>
<div class="cell right-cell">
文件 "右"
</div>
</div>
</body>
</html>
```
这个例子中,`.container` 是总的容器,`.cell` 是单个格子,`.left-cell` 和 `.right-cell` 分别对应左列和右列,并设置了不同的背景色和文本对齐方式。
阅读全文