几个布局

最新推荐文章于 2022-08-01 17:49:54 发布

不吃饭会饿

最新推荐文章于 2022-08-01 17:49:54 发布

阅读量215

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/celi_echo/article/details/100598190

版权

前端专栏收录该内容

88 篇文章 1 订阅

订阅专栏

一、三行布局

1、老办法
不管你是用calc还是直接写，本质都是固定定位
Css部分

<span style="font-family:Microsoft YaHei;"><style>
html,body{
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
}
#top{
	position:absolute;
	top:0;
	left:0;
	background-color:#05C020;
	height:50px;
	width:100%;
	z-index:100;
}
#bottom{
	position:absolute;
	bottom:0;
	left:0;
	background-color:#88D6E9;
	height:50px;
	width:100%;
	z-index:100;
}
	
#middle{
	position:absolute;
	width:100%;
	overflow:auto;
	background-color:#F0E6A2;	
	bottom:50px;
	top:50px;
	_height:100%;
	_border-top:50px solid #eee;
	_border-bottom:50px solid #eee;
	_top:0px;
	z-index:90;
}
#middle p{margin:0;}
</style></span>

html

<span style="font-family:Microsoft YaHei;"><body>
<div id="all">
    	<div id="top">top</div>
        <div id="middle">
        	<p>有句话说，若可安逸，谁愿奔波。确。还是趁着年轻，多年代，没有什没有别人那么好吧。</p>
        </div>
        <div id="bottom">bototm</div>   
</div>
</body></span>

2、flex
html部分

<body>
  <div class="iii">
  <div class="yyy"></div>
  <div class="ttt">sssssssssssssssssssssssssssseeeeeessssss</div>
  <div class="yyy"></div>
</div>

css部分

.iii{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .yyy {
    height: 30px;
    width: 100%;
    background-color: aqua;
    
  }

  .ttt {
    height: 30px;
    width: 100%;
    flex: 1;
    /* overflow: auto; */

  }

在这里插入图片描述
这个思想可以用于两列三列多列布局中
我举个三列的例子

<style>
  .iii{
    display: flex;
    flex-direction: row;   
  }
  .yyy {
    height: 30px;
    width: 100px;;
    background-color: aqua;
  }

  .ttt {
    height: 30px;
    flex: 1;
  }
</style>

<body>
  <div class="iii">
  <div class="yyy"></div>
  <div class="ttt">sssssssssssssssssssssssssssseeeeeessssss</div>
  <div class="yyy"></div>
</div>

在这里插入图片描述
最近还看到一个题目
左边固定，右边两个输入框自适应
简单写了一下

<body>
  <div class="iii">
  <div class="yyy"></div>
  <div class="mmm">
  <input type="text" class="m1">
  <input type="text" class="m2">
</div>
</div>

<style>
  .iii{
    display: flex;
    flex-direction: row;   
  }
  .yyy {
    height: 500px;
    width: 500px;;
    background-color: aqua;
  }

  .mmm {
   flex:1;
   display: flex;
   flex-direction: column;   
  }
.m1{
  flex:1;
}
.m2{
  flex:1;
}
</style>

在这里插入图片描述
当然也可以用固定定位，先固定左边，再在右边分开设置大小，或者用float布局