资讯专栏INFORMATION COLUMN

两列布局之左边固定宽度,右边自适应(绝对定位实现方法)

william / 1509人阅读

摘要:我们经常看到这样的布局方式左边的侧边栏宽度固定,右边的主要内容区域宽度自适应变化。代码代码布局采用的思路是左边列采用绝对定位,脱离文档流,右边的列宽度,会自然地顶上来。这时候通过设置列的列的宽度实现内容不相互遮挡。

我们经常看到这样的布局方式:左边的侧边栏宽度固定,右边的主要内容区域宽度自适应变化。现在提供一个css布局方式。

html代码:

  
    order     

In restaurants, pizza can be baked in an oven with stone bricks above the heat source, an electric deck oven, a conveyor belt oven or a wood- or coal-fired brick oven.

       
  
    pizza     

Pizza

    

Various types of ovens are used to cook them and many varieties exist.

  
  

css代码:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.row {
  position: relative;
  width: 100%;
  background: #000;
}

布局采用的思路是:左边side列采用绝对定位,脱离文档流,右边的main列宽度100%,会自然地顶上来。但是我们看到的场景是side列浮在main列的上方。这时候通过设置main列的padding-left = side列的宽度实现内容不相互遮挡。

.side {
  position: absolute;/*脱离文档流,让右侧能顶上来*/
  top: 0;
  left: 0;
  width: 300px;
  height: 500px;
  background: #C0392B;
}
.main {
  width: 100%;
  height: 500px;
  background: #E74C3C;
  padding-left: 300px;/*左侧的宽度*/
}

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

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

相关文章

  • css中的那些布局

    摘要:张鑫旭老师的博客是左边流式布局,右边固定宽度左浮动因为浮动会导致元素脱离文档流,所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动,因为绝对定位会脱离文档流,只需要设置右的就能实现布局。 因为最近心血来潮,就总结了一下css中的几种常见的多列布局。 两列自适应布局 两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用。 这...

    phodal 评论0 收藏0
  • css中的那些布局

    摘要:张鑫旭老师的博客是左边流式布局,右边固定宽度左浮动因为浮动会导致元素脱离文档流,所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动,因为绝对定位会脱离文档流,只需要设置右的就能实现布局。 因为最近心血来潮,就总结了一下css中的几种常见的多列布局。 两列自适应布局 两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用。 这...

    liangzai_cool 评论0 收藏0
  • CSS原生布局方式

    摘要:布局任何元素在默认的情况下都是处于整个文档流中的,不会浮动的。相对定位如果想为元素设置层级布局模型中的相对定位,需要设置表示相对定位,它通过属性确定元素在正常文档流中的偏移位置。 showImg(https://segmentfault.com/img/remote/1460000009753577); 前言 网页原生布局的方法其实网上有很多,大概为Flow(流动布局模型)、Float...

    PingCAP 评论0 收藏0
  • CSS基础篇--页面实现两列布局,一列固定宽度,一列宽度适应方法

    摘要:不管是左是右,反正就是一边宽度固定,一边宽度自适应。博客园的很多主题也是这样设计的,我的博客园博客也是右侧固定宽度,左侧自适应屏幕的布局方式。与配合使用首先我们调整一下结构自适应区固定宽度区代码这样实现,的实际宽度就是屏幕宽度。 我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式:1.左右结构,左边100%;右边宽度固定2.左右结构,左边固定,右边100%...

    RichardXG 评论0 收藏0

发表评论

0条评论

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