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内容变化.- -!

  • 相关阅读:
    贪心例题
    第十六周总结
    软件工程个人课程总结
    冲刺二十一天
    浅谈async/await
    浅谈设计模式的六大原则
    dotnetcore配置框架简介
    这一次,终于弄懂了协变和逆变
    科个普:进程、线程、并发、并行
    五分钟了解Semaphore
  • 原文地址:https://www.cnblogs.com/eastday/p/1745537.html
Copyright © 2011-2022 走看看