中间内容区域流动布局即中间宽度自适应

负边距实现内容区域宽度自适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {margin:0; padding:0;}
    body {font:1em helvetica, arial, sans-serif;}
    div#main_wrapper{
      max-width: 1400px;
      margin:0 auto;
    }
    div#wrap {
      float:left;
      width:100%;
    }
    div#leftwrap {
      float:left;
      width:100%;
      margin-right:-220px;
    }
    nav {
      float:left;
      width:200px;
      background:#f00;
      padding:20px 0;
    }
    nav > * {margin:0 10px;}
    article {
      width:auto;
      margin-left:200px;
      margin-right:220px;
      background:#eee;
      padding:20px 0;
    }
    article > * {margin:0 20px;}
    aside {
      float:left;
      width:220px;
      background:#ffed53;
      padding:20px 0;
    }
    aside > * {margin:0 10px;}
  </style>
</head>
<body>
  <div id="main_wrapper">
    <div id="wrap">
      <div id="leftwrap">
        <nav>
          导航
        </nav>
        <article>
          <span>流动区域</span>  
        </article>
      </div>
      <aside>
        侧栏
      </aside>
    </div>
  </div>
</body>
</html>
  1. 给右栏腾出220像素右边距
  2. 左栏和中栏的父级栏加上相同的220像素的负右边距,创造右边空间
  3. 中栏宽度auto所以它会占据剩余空间
  4. 总结:article自己的右外边距在两栏外包装内为右栏腾出空间,而两栏外包装的负右边距又把右栏拉回了该空间。

css3实现

使用disolay:table-cell

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      section{max-width: 1400px; margin: 0 auto;}
      nav#nav { display:table-cell; width:150px; padding:10px;
      background:#dcd9c0;}
      article#article { display:table-cell; padding:10px 20px;
      background:#ffed53;width: auto;}
      aside#aside { display:table-cell; width:210px; padding:10px;
      background:#3f7ccf;}
    </style>
</head>
<body>
  <section>
    <nav id="nav"></nav>
    <article id="article">我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏我是中栏</article>
    <aside id="aside"></aside>
  </section>
</body>
</html>

你可能感兴趣的:(css3,html5)