阅读目录
垂直居中
- 垂直居中
- 基本实现思路
-
- 单列布局
-
- 示例网站
- 两列布局
-
- 示例网站
- 两列布局的实现
-
- 第 1 步，写好 HTML 结构。这里为了查看方便，我们为布局容器设置背景颜色和高度。
- 第 2 步，将布局容器水平排列
- 第 3 步，调整布局容器宽度
- 第 4 步，增加媒体查询
- 三列布局
-
- 示例网站
- 三列布局的实现
-
- 第 1 步，写好 HTML 结构，为了辨认方便，我们给布局容器设置背景色和高度。
- 第 2 步，让布局容器水平排列
- 第 3 步，调整宽度，将主要布局容器 main 撑满，次要布局容器 left 固定 300px，次要布局容器 right 固定 200px。
- 第 4 步，消除副作用。我们知道使用浮动会造成高度塌陷，如果在父元素后面添加新的元素就会产生这个问题。所以可以通过伪类来清除浮动，同时减小页面宽度，还会发现次要布局容器 left 和 right 都换行了，但这个副作用我们可以在第 5 步时进行消除。
- 第 5 步，利用媒体查询调整页面宽度较小情况下的显示优先级。这里我们仍然希望优先显示主要布局容器 main，其次是次要布局容器 left，最后是布局容器 right。
<div class="inline-box"> <img src="./images/01.png" alt="图片" height="50px"> <p>p标签，inline-block vertical-align: middle; /* 基于行框高度 垂直居中*/ } .inline-box p { display: inline-block; margin: 0; } height: 100px; } main { background-color: #f09e5a; } aside { background-color: #c295cf; } display: flex; flex-direction: row-reverse; } .main { flex: 1; } .aside { flex: 1; } display: flex; flex-direction: row-reverse; } .main { flex: 1; } .aside { width: 200px; } height: 100px; } .wrap { display: flex; flex-direction: row-reverse; flex-wrap: wrap; } .main { flex: 1; background-color: #f09e5a; } .aside { width: 200px; background-color: #c295cf; } @media only screen and (max-width: 1000px) { .wrap { flex-direction: row; } .main { flex: 100%; } } height: 100px; } .main { background-color: red; } .left { background-color: green; } .right { background-color: blue; } float: left; } float: left; } .wrap { padding: 0 200px 0 300px; } .main { width: 100%; background-color: red; } .left { width: 300px; position: relative; left: -300px; margin-left: -100%; background-color: green; } .right { position: relative; width: 200px; margin-left: -200px; right: -200px; background-color: blue; } float: left; } .wrap { padding: 0 200px 0 300px; } .wrap::after { content: ''; display: block; clear: both; } .main { width: 100%; background-color: red; } .left { width: 300px; position: relative; left: -300px; margin-left: -100%; background-color: green; } .right { position: relative; width: 200px; margin-left: -200px; right: -200px; background-color: blue; } float: left; } .wrap { padding: 0 200px 0 300px; } .wrap::after { content: ''; display: block; clear: both; } .main { width: 100%; background-color: red; } .left { width: 300px; position: relative; left: -300px; margin-left: -100%; background-color: green; } .right { position: relative; width: 200px; margin-left: -200px; right: -200px; background-color: blue; } @media only screen and (max-width: 1000px) { .wrap { padding: 0; } .left { left: 0; margin-left: 0; } .right { margin-left: 0; right: 0; }
关注
打赏
![]()
1688896170
查看更多评论
