DIV CSS layout example_html/css_WEB-ITnose

第一种:左菜单右边内容自动变宽的布局

Code

Code

    

    

banner

    

nav

    

    

    

    

    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符
    测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符测试字符v

再宽也不会自动换行了

    

    

    

    menu
    

    

       

    foot
    

    

 

第二种，页宽度固定，分栏显示内容

     body {  text-align : center ;  padding : 0px ;  margin : 5px ;  border : 0px ; }
    .topWrap {  overflow : hidden ;  padding : 5px 0px 0px 0px ;  background : #ccc ; }
    .headerBox {  margin : 0px auto ;  width : 950px ;  background-color : #aaa ;  height : 30px ; }
    .banner { margin : 0px auto ;  width : 950px ;  background-color : #888 ;  height : 80px ; }
    .wrap {  margin : 0px auto ;  width : 950px ;  padding : 1px 0px 0px 0px ;  background : #000 ; }
    .p_1 {  overflow : hidden ;  text-align : left ;  margin-bottom : 1px ; }
    .p_1 .p_l_left {  width : 340px ;  background-color : #ff0000 ;  float : left ; }
    .p_1 .p_1_middle {  width : 340px ;  background-color : #00ff00 ;  float : left ;  margin-left : 10px ; }
    .p_1 .p_1_right {  width : 250px ;  background-color : #0000ff ;  float : left ;  margin-left : 10px ; }
    

 

Code

    
    
    header

    banner