首页 > 代码库 > css margin负边距之列布局(列表、圣杯、双飞翼)

css margin负边距之列布局(列表、圣杯、双飞翼)

技术服务于应用,技术来源于应用。

应用1:当接到设计师给的设计图时(如下图),发现每列左右和上下文保持一致,顿时整个心情就不好了。因为要兼顾响应式,即没办法保证每个列表单元的具体位置,是列表中间还是边缘,边缘两个要保证(左或右)内外边距为零,无法获得理想布局,综合多次搜索,得到解决办法:

   技术分享

 

   *** 增加列表区域宽度,margin设为负值。

原理相信有css基础的道友都清楚(负边距不仅能影响元素在文档流的位置,还能增加元素的宽度),父元素向右增加宽度(margin负值)与列表元素右边距相等,因使用的是bootstrap框架,列表元素默认padding15px,想要实现效果图,就需要覆盖样式,将内边距重写为0,然后使用margin设置边距。代码如下:

技术分享

 

 代码如下:div

  <div class="tab-content lists">
    <div class="tab-pane active" id="Ordinal">
      <div>
        <div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
          <div class="website-products">
            <div >
              <div class="website-span">
              <span>Collating sequence:</span>
              <input type="text" />
            </div>
        </div>
        <img class="img-responsive" src="http://www.mamicode.com/img/person/products.png" />
        <div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
       </div>
      </div>
      <div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <div class="website-products">
          <div >
            <div class="website-span">
              <span>Collating sequence:</span>
              <input type="text" />
            </div>
        </div>
        <img class="img-responsive" src="http://www.mamicode.com/img/person/products.png" />
        <div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
      </div>
    </div>
    <div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
      <div class="website-products">
        <div >
          <div class="website-span">
            <span>Collating sequence:</span>
            <input type="text" />
          </div>
        </div>
        <img class="img-responsive" src="http://www.mamicode.com/img/person/products.png" />
        <div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
      </div>
    </div>
    <div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
      <div class="website-products">
        <div >
          <div class="website-span">
            <span>Collating sequence:</span>
            <input type="text" />
          </div>
        </div>
        <img class="img-responsive" src="http://www.mamicode.com/img/person/products.png" />
        <div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
      </div>
    </div>
    <div class="website-list col-lg-3 col-md-3 col-sm-4 col-xs-6">
    <div class="website-products">
      <div >
        <div class="website-span">
          <span>Collating sequence:</span>
          <input type="text" />
        </div>
      </div>
      <img class="img-responsive" src="http://www.mamicode.com/img/person/products.png" />
      <div><span>SupFire Bright USB waterproof outdoor lighting mountain bike</span></div>
    </div>
  </div>
  </div>
</div>

主要CSS:

  .website-list{
    padding: 0px 39px 39px 0px;
  }
  .lists{
    margin-right: -39px;
  }

 

 

应用2:经典布局圣杯布局和双飞翼布局:

相同点::布局要求:主题部分三列,左右两栏固定宽度,中间部分自适应。

不同点::解决“中间栏div内容不被遮挡”问题的方法不同。圣杯布局,将中间栏元素设置padding left right后,将左右两个div用相对布局position:relative;配合right和left属性,以便不遮挡中间div,双飞翼布局,在中间div内部创建div,设置子div的margin left right属性,为两边div留下位置。

 

圣杯布局-原理:

1、将middle首先放在container的子元素第一个,然后是left,right,同时设置三者float:left;

2、middle要自适应,需要设置width:100%;让left部分和middle处于一行,要是用margin-left:-100%;

3、此时left部分会遮盖middle的内容,将middle部分收缩起来,设置其父元素container内边距,padding:0 200px;

4、left部分内容随同middle收缩,占据middle一部分,需要设置left部分使用相对定位,独立于middle,left:-200px;

5、同理right部分放置middle右部分,需要设置其相对定位、宽度和margin-left、right值。

代码如下:  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
  body{
    margin:auto;
    text-align: center;
  }
  .container{
    overflow: hidden;
    margin:10px 0;
    padding: 0 200px;
  }
  .left{
    float: left;
    position: relative;
    margin-left: -100%;
    left: -210px;
    width: 200px;
    background-color:grey;
  }
  .middle{
    float: left;
    width: 100%;
    background-color: red;
  }
  .right{
    right: -210px;
    margin-left: -200px;
    width: 200px;
    float: left;
    position: relative;
    background-color: grey;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

 

双飞翼-原理:

    1、将middle首先放在container的子元素第一个,然后是left,right,同时设置三者float:left;

    2、middle要自适应,需要设置width:100%;让left部分和middle处于一行,要是用margin-left:-100%;,right使用margin-left:-190px;

    3、此时middle的内容被覆盖,要把middle的内容拉出来,除了使用外围container的padding,还可以考虑使用margin,给middle增加一个内层div -- middle_content, 然后设置 margin:0 200px 
实现代码:

<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
  body {
    text-align: center;;
  }

  .container {
    overflow: hidden;   
    margin: 10px 0;
  }
  .left {
    background-color: red;
    float:left;
    width:190px;
    margin-left: -100%;
  }
  .right {
    background-color: green;
    width: 190px;
    float: left;
    margin-left: -190px;
  }
  .middle {
    float: left;
    width: 100%;
  }
  .middle-content {
    background-color:grey;
    margin: 0 200px;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="middle">
      <div class="middle-content">
      middle-content
      </div>
    </div>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </div>
</body>
</html>

优化:当缩小放大浏览器界面时,左右盒子宽度不变,中间是自适应的,但当界面太窄时,就会出现显示问题,为大盒子(container)这是最小宽度,当界面小于最小宽度时,中间宽度不变,出现横向滚动。

 

css margin负边距之列布局(列表、圣杯、双飞翼)