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>
  • 相关阅读:
    【Python必学】Python爬虫反爬策略你肯定不会吧?
    SpringBoot_日志-切换日志框架
    dev、test和prod是什么意思
    SpringBoot_日志-指定日志文件和日志Profile功能
    SpringBoot_日志-SpringBoot默认配置
    SpringBoot_日志-SpringBoot日志关系
    SpringBoot_日志-其他日志框架统一转换为slf4j
    SpringBoot_日志-日志框架分类和选择
    SpringBoot_配置-@Conditional&自动配置报告
    gcc系列工具 介绍
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3732061.html
Copyright © 2011-2022 走看看