Blueprint CSS最后一列无法正常工作

时间:2013-02-07 18:37:19

标签: blueprint-css

我有一个10列蓝图设置,并且有两个div,每个是5列宽的麻烦。第二个总是跳到第一个下面,即使我在第二个div中有“最后一个”。

以下是代码:

<div class="container">

<div class="span-5">
    <ul><li><p><strong>Discounts on professional development programs that protect your interests.</strong> We monitor state and national policy issues that affect our industry and take action on our members' behalf. These efforts ensure that our members have a powerful voice and strong representation on the issues that matter.</p></li></ul>
</div>

<div class="span-5 last">
<ul><li><p><strong>Marketing and promotional opportunities and management and operational resources.</strong> You get access to useful tools as well as valuable insights and expert perspectives on industry issues and trends that will help your business succeed.</p></li></ul>
</div>

</div>

这是CSS的一部分:

 == STRUCTURE: ========================
    * Page width:            640 px
    * Number of columns:     10
    * Column width:          55 px
    * Margin width:          10 px
   ======================================

   By default, the grid is 640px wide, with 10 columns 
   spanning 55px, and a 10px margin between columns.

   If you need fewer or more columns, use this formula to calculate
   the new total width: 

   Total width = (number_of_columns * column_width) - margin_width

-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 640px;
  margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(src/grid.png); 
}

/* Body margin for a sensile default look. */
body {
  margin:1.5em 0;   
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10 {float:left;margin-right: 10px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 55px;}
.span-2  { width: 120px;}
.span-3  { width: 185px;}
.span-4  { width: 250px;}
.span-5  { width: 315px;}
.span-6  { width: 380px;}
.span-7  { width: 445px;}
.span-8  { width: 510px;}
.span-9  { width: 575px;}
.span-10, div.span-10 { width: 640px; margin: 0; }

0 个答案:

没有答案