zoukankan      html  css  js  c++  java
  • 三栏的网页布局,中间宽度自适应

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link  href="style.css" rel="stylesheet" />
      <style type="text/css">
                            #box
                            {
                                    /*高度必须设置,否则IE下子元素的absolute定位异常。且此处应设置为100%,因为内容部分的高度不确定。*/
                                    height:100%;
                                    position:relative;
                                    
                            }
                            #middle
                            {
                                    height:100px;
                                    margin:0 200px;
                                    background-color:red;
                            }
                            #left
                            {
                                    height:100px;
                                    200px;
                                    position:absolute;
                                    top:0px;
                                    left:0px;
                                    background-color:green;
                            }
                            #right
                            {
                                    height:100px;
                                    200px;
                                    position:absolute;
                                    top:0px;
                                    right:0px;
                                    background-color:blue;
                            }
                    </style>
    </head>
    <body>
      <div id="box">
                            <!--优先加载中间部分,后加载两侧-->
                            <div id="middle"></div>
                            <div id="left"></div>
                            <div id="right"></div>
                    </div>
    </body>
    </html>
  • 相关阅读:
    QNET弱网测试工具
    echart
    数组按照一大一小打乱排列
    根据环境开启 vconsole
    时间戳在ios上面显示NAN Bug
    去除字符串中html标签
    ios 上 复选框背景黑边bug
    echarts配置项说明
    JS 数据处理技巧及小算法
    js中最常用的几种遍历数据方法
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3732061.html
Copyright © 2011-2022 走看看