ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

div上固定,下自适应;div左固定,右自适应

2022-05-06 18:03:44  阅读:239  来源: 互联网

标签:flex background 100% height 适应 width 固定 div left


一,上固定,下自适应

1,代码 

<div class="all">
<div class="top">111</div>
<div class="center">222</div> </div> <style> .all { width: 100%; height: 100%; display: flex; flex-direction: column; } .top {
width: 100%; height: 100px; background-color: #1ab394; } .center { width: 100%; flex: 1; background-color: #1c84c6; } </style>

2,图例

二,下固定,上自适应

1,代码

<div class="all">
<div class="top">111</div>
<div class="center">222</div> </div> <style> .all { width: 100%; height: 100%; display: flex; flex-direction: column; } .top { width: 100%; flex: 1; background-color: #1c84c6; } .center { width: 100%; height: 100px; background-color: #1ab394; } </style>

2,图例

三,上下固定,中间自适应

1,代码

<div class="all">
<div class="top">111</div>
<div class="center">222</div>
<div class="bottom">333</div> </div> <style> .all { width: 100%; height: 100%; display: flex; flex-direction: column; } .top { width: 100%; height: 100px; background-color: #1ab394; } .center { width: 100%; flex: 1; background-color: #1c84c6; } .bottom{ width: 100%; height: 100px; background-color: #13ce66; } </style>

2,图例

四,左固定,右自适应

1,代码

1.1,float布局

<div class="all">
<div class="left">111</div>
<div class="right">222</div> </div> <style> .all { width: 100%; height: 100%; } .left { width: 320px; height: 100%;
float: left; background: #409EFF; } .right { width: 100%; height: 100%; background: #008489; } </style>

1.2,flex布局

<div class="all">
<div class="left">111</div>
<div class="right">222</div> </div> <style> .all { width: 100%; height: 100%;
display: flex; } .left { width: 320px; height: 100%;
flex:none; background: #409EFF; } .right { width: 100%; height: 100%; flex:1; background: #008489; } </style>

1.3,table布局

<div class="all">
<div class="left">111</div>
<div class="right">222</div> </div> <style> .all { width: 100%; height: 100%; display: table; } .left { width: 320px; height: 100%; display:table-cell; background: #409EFF; } .right { height: 100%; display:table-cell; background: #008489; } </style>

1.4,calc布局

<div class="all">
<div class="left">111</div>
<div class="right">222</div> </div> <style> .all { width: 100%; height: 100%; display: table; } .left { width: 320px; height: 100%; float:left; background: #409EFF; } .right { height: 100%; float:right; width:calc(100% - 320px); background: #008489; } </style>

1.5,margin-left布局

<div class="all">
<div class="left">111</div>
<div class="right">222</div> </div> <style> .all { width: 100%; height: 100%; display: table; } .left { width: 320px; height: 100%; float:left; background: #409EFF; } .right { height: 100%; width:auto; margin-left:320px; background: #008489; } </style>

2,图例

五,综合

1,仿网站布局1

先左固定,右自适应;再上下固定,中自适应

<div class="all">
	<div class="left">111</div>
	<div class="right">
		<div class="right-top">222</div>
		<div class="right-center">333</div>
		<div class="right-bottom">444</div>
	</div>
</div>

<style>
  .all {
    width: 100%;
    height: 100%;
  }

  .left {
    width: 320px;
    height: 100%;
    float: left;
    background: #409EFF;
  }

  .right {
    height: 100%;
    width: auto;
    margin-left: 320px;
    background: #008489;

    display: flex;
    flex-direction: column;
  }

  .right-top {
    width: 100%;
    height: 100px;
    background-color: #1ab394;
  }

  .right-center {
    width: 100%;
    flex: 1;
    background-color: #1c84c6;
  }

  .right-bottom {
    width: 100%;
    height: 100px;
    background-color: #13ce66;
  }
</style>

 

2,仿网站布局2

先上固定,下自适应;再左固定,右自适应

<div class="all">
	<div class="top">111</div>
	<div class="center">
		<div class="left">222</div>
		<div class="right">333</div>
	</div>
	<div class="bottom">444</div>
</div>

<style>
  .all {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .top {
    width: 100%;
    height: 100px;
    background-color: #1ab394;
  }

  .center {
    width: 100%;
    flex: 1;
    background-color: #1c84c6;
  }

  .bottom {
    width: 100%;
    height: 100px;
    background-color: #13ce66;
  }

  .left {
    width: 320px;
    height: 100%;
    float: left;
    background: #409EFF;
  }

  .right {
    height: 100%;
    width: auto;
    margin-left: 320px;
    background: #008489;
  }
</style>

如图所示

3,仿XShell页面布局

先上固定,下自适应;再左固定,右自适应;最后左上自适应,左下固定

<div class="all">
	<div class="top">111</div>
	<div class="center">
		<div class="left">
			<div class="left-top">222</div>
			<div class="left-bottom">333</div>
		</div>
		<div class="right">444</div>
	</div>
	<div class="bottom">555</div>
</div>

<style>
  .all {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .top {
    width: 100%;
    height: 100px;
    background-color: #1ab394;
  }

  .center {
    width: 100%;
    flex: 1;
    background-color: #1c84c6;
  }

  .bottom {
    width: 100%;
    height: 100px;
    background-color: #13ce66;
  }

  .left {
    width: 320px;
    height: 100%;
    float: left;
    background: #409EFF;

    display: flex;
    flex-direction: column;
  }

  .right {
    height: 100%;
    width: auto;
    margin-left: 320px;
    background: #008489;
  }

  .left-top {
    width: 100%;
    flex: 1;
    background-color: #1c84c6;
  }

  .left-bottom {
    width: 100%;
    height: 100px;
    background-color: #1ab394;
  }

</style>

 

 

标签:flex,background,100%,height,适应,width,固定,div,left
来源: https://www.cnblogs.com/lgx211/p/16229782.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有