问题：1. 左右布局 2. 左中右布局

写在最前：加border是为了看到container的宽高，方便做布局与居中,更清楚看到左右的布局

1.左右布局

Ⅰ. 使用float布局

html

<body>
<div class="container clearfix">
      <div class="left">左</div>
      <div class="right">右</div>
</div>
</body>

CSS

.left{
   background-color: red;
  float: left;
}     
.right{
      float: right;
      background-color: blue;
}

1.gpj.png

一. 可以通过调整宽度高度来调整大小
二. 也可以调整宽度百分比
PS ：方方说，能不用宽高就不用。

Ⅱ. 使用 position

HTML

<div class="container">
      <div class="left">左</div>
     <div class="right">右</div>
  </div>

CSS

*{
  margin: 0;
  padding: 0;
}
.left{
position: relative;
  background-color: red;
  width: 50px;
}     
.right{ top: 0;
  right:100px;
  position: absolute;
 background-color: blue;
}

2.png

左侧固定，右侧可调整

2. 左中右布局

Ⅰ. 使用float布局

HTML

<div class="container clearfix">
  <div class="left">左</div>
  <div class="mid">中</div>
  <div class="right">右</div>
</div>

CSS

.container{
  width: 300px;
  border: 1px solid red;
  height: 100px;
  margin
}
.left {
  width: 30%;
  float: left;
  background: red;
  height:100%;
}
.mid{
  width: 40%;
  float: left;
  background: green;
  height:100%;
}
.right {
  width: 30%;
  float: right;
  background: blue;
  height:100%;
}

3.png

PS: 根据宽度百分比调整，使用float之后，元素顺次流动（float特点：在另一篇文章中会写出来《CSS学习笔记》），可以同行排列，相当于display：block
也可以利用float做文字围绕图片效果。

Ⅱ. 使用position布局

HTML

<div class="container">
      <div class="left">左</div>
     <div class="mid">中</div>
     <div class="right">右</div>
  </div>

CSS

*{
  margin: o;
  border: 0;
}
.container{
  max-width:300px;
  margin: 0 auto;  //这一步使整个三栏居中
  position: relative;
  border: 1px solid red;
}
.left {
    width: 50px;
    height: 100%;
    background-color: red;
    position: absolute;
    left: 0;
}      
.mid {
    background-color: green;
    margin: 0 50px;
    position: relative;
}
.right {
    top: 0;
    width: 50px;
    height: 100%;
    background-color: blue;
    position: absolute;
    right:0;
}