SOURCE

console 命令行工具 X clear

                    
>
console
<!-- 左边固定 右边自动填满 -->

<div class="left">左边固定宽度</div>
<div class="right-overflow">右边自动填满</div>

<!-- 左右固定 中间自适应 -->
<div class="left">左边固定宽度</div>
<div class="right">右边固定宽度</div>
<dic class="center">中间自适应</dic>

<!-- 固定在底部 -->
<div class="relative">
  <div class="abs"></div>
</div>

<div>
<span>连续不换行的span</span><span>连续不换行的span</span><span>连续不换行的span</span><span>连续不换行的span</span>
</div>
<!-- 
1、连续的换行的span之间出现了空格
2、使用float解决
-->
<div class="nocontinue" >
  <span>连续的换行的span</span>
  <span>连续的换行的span</span>
  <span>连续的换行的span</span>
  <span>连续的换行的span</span>
</div>
.left{
  float:left;
  width: 100px;
  background: pink;
}

.right-overflow{
  overflow: hidden;
  background: #ff0;
}

.right{
  float:right;
  width: 100px;
  background-color: pink;
}
.center{
  margin:0 200px; 
  background-color:lightblue
}

.abs{
  position:absolute;
  background-color: green;
  height: 30px;
  width: 100%;
  bottom:0;
}

.relative{
  position:relative;
  height: 200px;
  width: 90%;

  background-color: lightblue;
}

div.nocontinue span{
  float:left;
}