关于css:自适应的两栏布局

33次阅读

共计 1135 个字符，预计需要花费 3 分钟才能阅读完成。

办法一：float 布局

html 局部

<div class="main">
  <div class="left"></div> 
  <div class="right"></div>
</div>

CSS 局部

.main{
  position: relative;
  width: 100%;
  height: 100%;
}

 .right{
  width: 100%;
  height: 100%;
  background: #4caf50;
}

.left{
  width: 200px;
  height: 100%;
  background: #4a1362;
  float: left;
}

办法二：相对定位

1、右边相对定位，左边设置 padding-left

html 局部

   <div class="main">
     <div class="right"></div> 
     <div class="left"></div>
   </div>

css 局部

.main{
  position: relative;
  width: 100%;
  height: 100%;
}
.right{
  position: relative;
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  position: absolute;
  top:0;
  width: 200px;
  height: 100%;
  background: #4a1362;
  }

2，左边相对定位，左边设置 padding

html 局部同上

css 局部

.main{
  position: relative;
  width: 100%;
  height: 100%;
}
.right{
  position: absolute;
  padding-left: 200px;
  top:0;
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  position: relative;
  width: 200px;
  height: 100%;
  background: #4a1362;
}

办法三：flex 布局

html 局部

<div class="main">
  <div class="left"></div> 
  <div class="right"></div>
</div>

css 局部

.main{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}
.right{
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  width: 200px;
  height: 100%;
  flex-shrink: 0;
  background: #4a1362;
}

flex-shrink 属性定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大。改为 0 则不会因为空间有余而放大，详见 flex 布局

正文完