1. 两列布局的基本方法
实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。
方法一：使用浮动（Float）
浮动是一种早期的布局方式，虽然现在不推荐，但仍然有必要了解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Column Layout using Float</title>
<style>
.container {
width: 100%;
}
.left-column {
float: left;
width: 50%;
background-color: lightblue;
height: 300px; /* for demonstration */
}
.right-column {
float: left;
width: 50%;
background-color: lightgreen;
height: 300px; /* for demonstration */
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="left-column">Left Column</div>
<div class="right-column">Right Column</div>
</div>
</body>
</html>
关键点：
float: left;用于将列浮动到左侧。.clearfix::after伪元素用于清除浮动，防止父容器高度塌陷。
方法二：使用Flexbox
Flexbox是一个强大而现代的布局方式，非常适合实现响应式布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Column Layout using Flexbox</title>
<style>
.container {
display: flex;
}
.left-column {
flex: 1;
background-color: lightblue;
height: 300px; /* for demonstration */
}
.right-column {
flex: 1;
background-color: lightgreen;
height: 300px; /* for demonstration */
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">Left Column</div>
<div class="right-column">Right Column</div>
</div>
</body>
</html>
关键点：
display: flex;用于将父容器设为Flex容器。flex: 1;确保两列等宽。
方法三：使用Grid布局
Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Column Layout using Grid</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.left-column {
background-color: lightblue;
height: 300px; /* for demonstration */
}
.right-column {
background-color: lightgreen;
height: 300px; /* for demonstration */
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">Left Column</div>
<div class="right-column">Right Column</div>
</div>
</body>
</html>
关键点：
display: grid;用于将父容器设为Grid容器。grid-template-columns: 1fr 1fr;用于定义两个等宽的列。
2. 响应式设计
无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。
使用媒体查询
例如，使用Flexbox实现响应式设计：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Two Column Layout</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.left-column, .right-column {
flex: 1 1 50%;
background-color: lightblue;
height: 300px; /* for demonstration */
box-sizing: border-box;
}
.right-column {
background-color: lightgreen;
}
@media (max-width: 768px) {
.left-column, .right-column {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">Left Column</div>
<div class="right-column">Right Column</div>
</div>
</body>
</html>
关键点：
flex-wrap: wrap;确保列在小屏幕上换行。- 媒体查询调整列宽度。
3. 实际应用中的技巧
- 垂直对齐：使用Flexbox的
align-items属性或Grid的align-content属性实现。 - 间距控制：使用Flexbox的
gap属性或Grid的grid-gap属性。 - 兼容性：虽然现代浏览器都支持Flexbox和Grid，但在实际项目中要考虑到部分老旧浏览器的兼容性，可以使用前缀或Polyfill。
1. 只能想到vuetify中的网格布局，如果需要居左居右还不知如何处理。
2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；通过给容器设置display: grid和grid-template-columns: 1fr 1fr，就可以实现等宽两列布局，这种是只在容器设置即可。
3. /
4. 多总结即可，容易忘。