欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用css实现左(右)侧固定宽度,右(左)侧宽度自适应方法介绍

程序员文章站 2022-04-19 21:05:30
...
老话长谈,css的不固定适应布局 不管是面试还是在平时的工作中,这样的布局形式一直都在用着,很常见,所以今天我就拿出来在唠叨一下, 既是给自己一个备忘存储,也是一个学习巩固的参考,知道大家都会,还是要记忆一下,不为其他,就为打好基础。

话说太多, 直接上代码,一看就能明白。 也许你会不屑一顾的说简单,可是我就喜欢写一些。。。。。。作为一个菜鸟,就要从基础努力学习才行。

方法多种, 你有新的方法可以补充说明,在此感谢!!

一、左边布局固定,右边自适应的布局

*{ margin:0; padding:0}

.whole{ width:100%;}

<p class="whole">
<p>自适应测试</p>
<p class="left">固定左侧 300px</p>
<p class="right">右侧自适应</p>
</p>

方法1: 左侧用float浮动,给固定宽度,右侧 左边距的距离==左侧层的宽度

  css代码:
    
.left{ float:left;width:300px; background:red}
    .right{ margin-left:300px; background:green; }

方法2:左边绝对定位absolate,右边代码没变化 还是右侧 左边距的距离==左侧层的宽度;

  css代码:

    .left{ position: absolute; left:0; width:300px; background:red}
    .right{ margin-left:300px; background:green; }

方法3(个人喜好用):左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠)

  css代码:

    .left{ position: absolute; left:0; width:300px; background:red}

    .right{ position: absolute; left:300px; background:green; }

二、左边布局不固定,右边布局固定-----方法一致,位置换下而已

<p class="whole">
<p>自适应测试</p>
<p class="left">左侧自适应</p>
<p class="right">右侧宽度固定</p>
</p>

方法1、左侧用左浮动,右边距==右侧层的宽度的负值(因为你是左撑开,距离右侧的距离不错层) 右侧的有浮动,固定宽度

.left{ float:left; width:100%; margin-right:-300px; background: red; }
  .right{ float: right; width: 300px;background: blue;}

方法2、左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠)

.left{ position: absolute; left:0; width: 100%; background: red;}
  .right{ position: absolute; left:200px; width:200px; background: green;}

方法3、

清除浮动的方法就一笔带过, 都会

1、在浮动层的下面单独定义一个层 <p class="clear"></p> .clear{ clear:both}

2、伪类方法:after (用在父类的布局层上)-常用

.father::after,.father::before{ clear: both; content: ""; display: table;}
   <p class='father'>
   <p class="son-flotleft"></p>
     <p class="son-flotrgt"></p>
   </p>

  3、父级元素设置overflow为hidden或者auto,固定高度 也可以--不建议 

.father{overflow:hidden; width: 100%; }  //overflow:auto; height:300px;

写的都比较简单, 文字表述很少,都是代码,说的思路再多,不让直接代码实际,用了后就明白意思了,good lucky。。


补充-- 禁止横屏

<p class="orientation-alert"><p>
在竖屏下浏览效果更佳!
</p></p>


.orientation-alert{
background: rgba(0,0,0,.85);
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1000000;
color: #FFF;
display: none;
}
.orientation-alert p{
position: absolute;
width: 100%;
top: 50%;
font-size: 20px;
line-height: 30px;
margin-top: -15px;
text-align: center;
}
@media screen and (orientation : landscape){
.orientation-alert{
display: block;
}
}
@media screen and (orientation : portrait){
.orientation-alert{
display: none;
}
}

以上就是使用css实现左(右)侧固定宽度,右(左)侧宽度自适应方法介绍的详细内容,更多请关注其它相关文章!

相关标签: css