写一个两列3行的html布局
时间: 2024-02-18 22:43:32 浏览: 20
<!DOCTYPE html>
<html>
<head>
<title>Two Column Layout</title>
<style>
.row {
display: flex;
flex-direction: row;
margin: 10px 0;
}
.col {
flex: 1;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id justo vel ipsum luctus pretium. Quisque vitae semper orci, et elementum velit. Nunc mollis nulla vel malesuada malesuada. Aliquam euismod nisl nec tortor efficitur, eget blandit ligula finibus. Sed euismod enim at leo eleifend, vel consequat odio hendrerit. Nam convallis, elit non consectetur euismod, elit ex semper leo, eu aliquam neque sapien non risus. Mauris feugiat felis id justo volutpat, nec tincidunt velit mollis. </p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id justo vel ipsum luctus pretium. Quisque vitae semper orci, et elementum velit. Nunc mollis nulla vel malesuada malesuada. Aliquam euismod nisl nec tortor efficitur, eget blandit ligula finibus. Sed euismod enim at leo eleifend, vel consequat odio hendrerit. Nam convallis, elit non consectetur euismod, elit ex semper leo, eu aliquam neque sapien non risus. Mauris feugiat felis id justo volutpat, nec tincidunt velit mollis. </p>
</div>
</div>
<div class="row">
<div class="col">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id justo vel ipsum luctus pretium. Quisque vitae semper orci, et elementum velit. Nunc mollis nulla vel malesuada malesuada. Aliquam euismod nisl nec tortor efficitur, eget blandit ligula finibus. Sed euismod enim at leo eleifend, vel consequat odio hendrerit. Nam convallis, elit non consectetur euismod, elit ex semper leo, eu aliquam neque sapien non risus. Mauris feugiat felis id justo volutpat, nec tincidunt velit mollis. </p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id justo vel ipsum luctus pretium. Quisque vitae semper orci, et elementum velit. Nunc mollis nulla vel malesuada malesuada. Aliquam euismod nisl nec tortor efficitur, eget blandit ligula finibus. Sed euismod enim at leo eleifend, vel consequat odio hendrerit. Nam convallis, elit non consectetur euismod, elit ex semper leo, eu aliquam neque sapien non risus. Mauris feugiat felis id justo volutpat, nec tincidunt velit mollis. </p>
</div>
</div>
<div class="row">
<div class="col">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id justo vel ipsum luctus pretium. Quisque vitae semper orci, et elementum velit. Nunc mollis nulla vel malesuada malesuada. Aliquam euismod nisl nec tortor efficitur, eget blandit ligula finibus. Sed euismod enim at leo eleifend, vel consequat odio hendrerit. Nam convallis, elit non consectetur euismod, elit ex semper leo, eu aliquam neque sapien non risus. Mauris feugiat felis id justo volutpat, nec tincidunt velit mollis. </p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id justo vel ipsum luctus pretium. Quisque vitae semper orci, et elementum velit. Nunc mollis nulla vel malesuada malesuada. Aliquam euismod nisl nec tortor efficitur, eget blandit ligula finibus. Sed euismod enim at leo eleifend, vel consequat odio hendrerit. Nam convallis, elit non consectetur euismod, elit ex semper leo, eu aliquam neque sapien non risus. Mauris feugiat felis id justo volutpat, nec tincidunt velit mollis. </p>
</div>
</div>
</body>
</html>