html代码两列并美化
时间: 2023-12-30 16:02:52 浏览: 22
可以使用 HTML 和 CSS 来实现两列并排并美化的效果。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>两列并排</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
width: calc(50% - 10px);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>左侧内容</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, magna a faucibus vestibulum, turpis est malesuada leo, in blandit velit leo eu mi. Sed auctor, tortor eget blandit eleifend, nunc massa lacinia felis, ac commodo mi augue et metus.</p>
</div>
<div class="box">
<h2>右侧内容</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, magna a faucibus vestibulum, turpis est malesuada leo, in blandit velit leo eu mi. Sed auctor, tortor eget blandit eleifend, nunc massa lacinia felis, ac commodo mi augue et metus.</p>
</div>
</div>
</body>
</html>
```
上述代码中,我们使用了 `display: flex` 和 `flex-wrap: wrap` 将两个 `div` 元素放在同一行并自动换行。`justify-content: space-between` 属性用于让两个 `div` 元素之间的间距自动平均分配。
接着,我们使用 `.box` 类为每个 `div` 元素添加了一些样式,包括背景颜色、边框、内边距、外边距和宽度。通过 `width: calc(50% - 10px)` 属性,我们将每个 `div` 元素的宽度设置为 50%,减去了 10px 的外边距和边框宽度。
最后,我们将两个 `div` 元素放在一个名为 `.container` 的父元素中,以便对它们进行整体样式设置。