资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/（CSS） 带有右侧边栏的响应式页面的CSS样式

（CSS） 带有右侧边栏的响应式页面的CSS样式

546669204 / 3491人阅读

摘要：一目的要创建一个响应式页面右侧边栏为，左侧内容为。当窗口宽度小于时，上述在上，在下，随着窗口大小的变化，二者的与自动调整。移动到上面实现的效果如下图在窗口宽度小于时，右侧边栏内容在网页上方显示，不合格。

一、目的

要创建一个响应式页面：

右侧边栏为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 第一种方案 
</>复制代码 
  2.   
  3.     
    left-top
  4.     
    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. 
  5.   
  6.   
  7.     
    right-bottom
  8.     
    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.
  9.   
  12.   
    footer
</>复制代码 
  1. @media (min-width: 700px) {
  2.   .section {           /* 清浮动 */
  3.     zoom: 1;
  4.   }
  5.   .section:after {     /* 清浮动 */
  6.     content: "";
  7.     display: block;
  8.     clear: both;
  9.   }
  10.   .left-top {
  11.     margin-right: 280px;
  12.   }
  13.   .right-bottom {
  14.     float: right;
  15.     width: 250px;
  16.   }
  17. }

实现的效果如下图：

显然是不合格的。

2.2 第二种方案

我们在html代码中，把div.right-bottom移到div.left-top上方。CSS样式不变。

</>复制代码 
  2.   
     
  3.     
    right-bottom
  4.     
    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.
  5.   
  6.   
  7.     
    left-top
  8.     
    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. 
  9.   
  12.   
    footer

实现的效果如下图：

在窗口宽度小于700px时，右侧边栏内容在网页上方显示，不合格。

2.3 第三种方案

我们在html代码中，将div.right-bottom重新移到div.left-bottom下方，并改变div.right-bottom的样式。CSS代码如下：

</>复制代码 
  1. @media (min-width: 700px) {
  2.   .section {
  3.     position: relative;   /* 为了配合 div.right-bottom 的绝对定位 */
  4.     zoom: 1;              /* 清浮动 */
  5.   }
  6.   .section:after {        /* 清浮动 */
  7.     content: "";
  8.     display: block;
  9.     clear: both;
  10.   }
  11.   .left-top {
  12.     margin-right: 280px;
  13.   }
  14.   .right-bottom {
  15.     position: absolute;    /* 绝对定位 */
  16.     top: 0;
  17.     right: 0;
  18.     width: 250px;
  19.   }
  20. }

实现效果如下：

乍一看，已经符合要求，但是，在窗口宽度大于700px条件下，调整窗口宽度大小，当div.left-top高度小于div.right-bottom时，问题出现了：

由于div.right-bottom采用了绝对定位，脱离了标准文档流，所以div.section的height就等于div.left-top的height。div.footer与div.right-bottom重叠。

2.4 第四种方案（正确方案）

前三种方案都有问题，那么，这个问题应该怎么解决呢？请看下列代码。

</>复制代码 
  2.   
           
  3.     
  4.       
    left-top
  5.       
    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. 
  6.     
  7.   
  8.   
       
  9.     
     
  10.       
    right-bottom
  11.       
    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.
  12.     
  13.   
</>复制代码 
  1. @media (min-width: 700px) {
  2.   .section {
  3.     zoom: 1;                /* 清浮动 */
  4.   }
  5.   .section:after {          /* 清浮动 */
  6.     content: "";
  7.     display: block;
  8.     clear: both;
  9.   }
  10.   .left-top-wrapper {
  11.     width: 100%;            /* 若无此句，width 则为 100% + 280px ，超出窗口宽度 */
  12.     float: left;            /* 浮动，脱离标准文档流，使 div.right-bottom-wrapper 的顶端与之平齐 */
  13.     margin-right: -280px;   /* 右侧让出 280px，放置 div.right-bottom */
  14.   }
  15.   .left-top {
  16.     margin-right: 280px;    /* 让出280px，以免文字与 div.right-bottom重叠 */
  17.   }
  18.   .right-bottom {
  19.     float: right;
  20.     width: 250px;
  21.   }
  22. }

实现效果如下：

尤其注意在窗口宽度大于700px条件下，调整窗口宽度大小，当div.left-top高度小于div.right-bottom时的效果：

参考

维珍集团官网

云服务器 GPU云服务器 页面css样式 css的样式 html的css样式 内联式css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111310.html

相关文章

  • CSS布局十八般武艺都在这里了

    摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。 本文首发于知乎专栏：前端指南 CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

    includecmath 评论0 收藏0

  • 4种方法实现边栏固定中间自适应的3栏布局

    摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局 设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果： See the Pen...

    EddieChan 评论0 收藏0

  • 4种方法实现边栏固定中间自适应的3栏布局

    摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局 设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果： See the Pen...

    MoAir 评论0 收藏0

  • 结合CSS3的布局新特征谈谈常见布局方法

    摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。 写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

    xuhong 评论0 收藏0

  • 结合CSS3的布局新特征谈谈常见布局方法

    摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。 写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

    cnTomato 评论0 收藏0

发表评论

登陆后可评论

0条评论

546669204

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<