zoukankan      html  css  js  c++  java
  • css 两栏自适应布局--左边固定宽度 右边自适应

    1.两栏或者多栏自适应布局

      首先要利用块级元素自动填充一行的概念,先用一个div元素占领一行,并通过margin-left给左边留下固定宽度

      然后将左栏设定宽度,并用负的margin-left将其顶入到左栏,然后使用position:absolute或者float-left将其提出文档流

      然后两栏就形成了。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
      <script type="text/css">
        div.main{
          outline:1px solid red;
          margin-left:200px;
        }
        div.aside{
          width:200px;
          margin-left:-200px;
          background-color:blue;
          height:400px;
          position:fixed;
        }
        div.content{
          background-color:yellow;
          height:600px;
        }
        div.footer{
          position:fixed;
          width:100%;
          bottom:0;
          height:100px;
          background-color:pink;
        }
      </script>
    </head>
    <body>
    <div class="main">
      <div class="aside">dsadsad</div>
      <div class="content">dasfa</div>
    </div>
      <div class="footer"></div>
    </body>
    </html>    
  • 相关阅读:
    CCPC-Wannafly Winter Camp Day4 Div1
    CCPC-Wannafly Winter Camp Day4 Div1
    CCPC-Wannafly Winter Camp Day4 Div1
    CCPC-Wannafly Winter Camp Day5 Div1
    Luogu 1603
    洛谷试炼场
    Codeforces 1100
    Codeforces 1099E
    Codeforces 1099
    Luogu 1093
  • 原文地址:https://www.cnblogs.com/lifeisshort/p/4850832.html
Copyright © 2011-2022 走看看