要在网页上创建一个简单的两列布局，你可以使用HTML和CSS。下面是一个示例代码，展示了如何实现这种布局：
HTML 结构
html
这里是左列的内容。
这里是右列的内容。
CSS 样式 (styles.css)
css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex; /* 使用 Flexbox 创建两列布局 */
max-width: 1200px; /* 设置最大宽度 */
margin: 20px auto; /* 居中容器 */
}
.left-column, .right-column {
padding: 20px; /* 内边距 */
box-sizing: border-box; /* 包括内边距和边框在内的宽高 */
}
.left-column {
flex: 1; /* 左列占据可用空间 */
background-color: #f4f4f4; /* 背景色 */
}
.right-column {
flex: 1; /* 右列占据可用空间 */
background-color: #e2e2e2; /* 背景色 */
}
说明
1. HTML 结构：
- 使用一个容器（`.container`）将两列内容包裹起来。
- 左列和右列分别用`
2. CSS 样式：
- 使用 `display: flex;` 使容器成为 Flexbox 布局，从而能够并排显示两列。
- 每一列（`.left-column` 和 `.right-column`）使用 `flex: 1;` 让它们平分可用空间。
- 添加了一些基本的样式，比如背景色和内边距，以便更清晰地展示两列。
你可以根据需要调整样式，添加更多内容或功能。这个例子是一个简单的起点。
查看详情
查看详情
