摘要：一目的要创建一个响应式页面右侧边栏为，左侧内容为。当窗口宽度小于时，上述在上，在下，随着窗口大小的变化，二者的与自动调整。移动到上面实现的效果如下图在窗口宽度小于时，右侧边栏内容在网页上方显示，不合格。
一、目的
要创建一个响应式页面：
右侧边栏为div.right-bottom，左侧内容为div.left-top。
当窗口宽度大于700px时，随着窗口大小的变化，div.right-bottom的width与height固定不变，div.left-top的width与height自动调整。
当窗口宽度小于700px时，上述div.left-top在上，div.right-bottom在下，随着窗口大小的变化，二者的width与height自动调整。
效果如下图：
二、代码与分析 2.1 第一种方案left-top
Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.
right-bottom
But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.
@media (min-width: 700px) {
.section { /* 清浮动 */
zoom: 1;
}
.section:after { /* 清浮动 */
content: "";
display: block;
clear: both;
}
.left-top {
margin-right: 280px;
}
.right-bottom {
float: right;
width: 250px;
}
}
实现的效果如下图：
显然是不合格的。
2.2 第二种方案我们在html代码中，把div.right-bottom移到div.left-top上方。CSS样式不变。
right-bottom
But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.
left-top
Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.
实现的效果如下图：
在窗口宽度小于700px时，右侧边栏内容在网页上方显示，不合格。
2.3 第三种方案我们在html代码中，将div.right-bottom重新移到div.left-bottom下方，并改变div.right-bottom的样式。CSS代码如下：
@media (min-width: 700px) {
.section {
position: relative; /* 为了配合 div.right-bottom 的绝对定位 */
zoom: 1; /* 清浮动 */
}
.section:after { /* 清浮动 */
content: "";
display: block;
clear: both;
}
.left-top {
margin-right: 280px;
}
.right-bottom {
position: absolute; /* 绝对定位 */
top: 0;
right: 0;
width: 250px;
}
}
实现效果如下：
乍一看，已经符合要求，但是，在窗口宽度大于700px条件下，调整窗口宽度大小，当div.left-top高度小于div.right-bottom时，问题出现了：
由于div.right-bottom采用了绝对定位，脱离了标准文档流，所以div.section的height就等于div.left-top的height。div.footer与div.right-bottom重叠。
2.4 第四种方案（正确方案）前三种方案都有问题，那么，这个问题应该怎么解决呢？请看下列代码。
left-top
Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.
right-bottom
But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.
@media (min-width: 700px) {
.section {
zoom: 1; /* 清浮动 */
}
.section:after { /* 清浮动 */
content: "";
display: block;
clear: both;
}
.left-top-wrapper {
width: 100%; /* 若无此句，width 则为 100% + 280px ，超出窗口宽度 */
float: left; /* 浮动，脱离标准文档流，使 div.right-bottom-wrapper 的顶端与之平齐 */
margin-right: -280px; /* 右侧让出 280px，放置 div.right-bottom */
}
.left-top {
margin-right: 280px; /* 让出280px，以免文字与 div.right-bottom重叠 */
}
.right-bottom {
float: right;
width: 250px;
}
}
实现效果如下：
尤其注意在窗口宽度大于700px条件下，调整窗口宽度大小，当div.left-top高度小于div.right-bottom时的效果：
参考维珍集团官网
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111310.html
摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。 本文首发于知乎专栏：前端指南 CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...
摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局 设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果： See the Pen...
摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局 设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果： See the Pen...
摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。 写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...
摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。 写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...
阅读 5264·2021-09-22 15:59
阅读 1855·2021-08-23 09:42
阅读 2560·2019-08-29 18:42
阅读 3443·2019-08-29 10:55
阅读 2057·2019-08-27 10:57
阅读 1759·2019-08-26 18:27
阅读 2721·2019-08-23 18:26
阅读 2911·2019-08-23 14:40
