两列 三列 布局

1.如果是两列布局,就使用float :left;  float:right; 来使其两列在一行上面

2.三列布局:
  body{margin:0; padding:0}
 .left{width:200px; height:500px;float:left; background:#ccc}
.middle{height:500px;float:left; background:#999}
.right{width:300px;height:500px;float:right; background:#ccc}

如上面设置成浮动的,却不能使其三列咋同一行

body{margin:0; padding:0}

 //绝对定位,停靠在浏览器左侧
 .left{
       width:200px;
       height:500px;
       background:#ccc;
       position:absolute;
       left:0;
       top:0
} 

 // 设置左右的margin 值------------->顺序:上 右 下 左
.middle{
       height:500px;
       background:#999;
       margin:0 300px 0 200px

} 

// 绝对定位,停靠在浏览器的右侧
.right{
     width:300px;
     height:500px;
     background:#ccc;
     position:absolute;
     right:0;
     top:0
}   

 

如果某文字超出某布局的范围,可以设置:word-break:break-all,就可以换行
如果超出的想要不显示，可以设置overflow:hidden