zoukankan      html  css  js  c++  java
  • 纯CSS列自适应高

    代码
    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml">
    3  <head>
    4  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    5 <title>高度自适应,纯CSS方法-两列/3列</title>
    6 <style type="text/css">
    7 body{
    8 margin:0 auto;
    9 }
    10 #box{ width:1000px; margin:0 auto}
    11 #container{
    12 background-color:#0ff; /*此背景色为右边的背景色*/
    13 float:left;
    14 width:700px;
    15 border-left:300px solid #0f0; /*width + border = BoxWidth 为了网页内容自动居中*/
    16 }
    17 #left{
    18 float:left;
    19 width:300px; /*border-width*/
    20 margin-left:-300px; /*border-width*/
    21 position:relative; /*位置属性,依据父对象.以免产生2个子对象重叠现象For IE6*/
    22 }
    23 </style>
    24 </head>
    25 <body>
    26 <div id="box">
    27 <div id="container">
    28 <div id="left">
    29 此为2列自适应高..<br>
    30 用border方式实现...<br>
    31 如果要修改Left的宽度.一定要连Container里面的border-left.也一起修改<br>
    32
    33 </div>
    34 <div id="right">
    35 right content
    36 </div>
    37 </div>
    38 </div>
    39
    40 </body>
    41 </html>

    实现原理:同个BOX内容变化.- -!

  • 相关阅读:
    Java小程序1(2015-8-6)
    Java小程序(2015-8-6)
    Java基础2(2015-8-3)变量与数据类型
    Java小程序2(2015-8-2)
    Java小程序1(2015-8-2)
    MySql修改时区
    6、ssm整合(干货)
    关于 TreeMap 和 HashMap 的去重操作
    5、SpringMVC:JSON
    4、配置MVC的乱码过滤:解决中文乱码
  • 原文地址:https://www.cnblogs.com/eastday/p/1745537.html
Copyright © 2011-2022 走看看