私は 10 列の設計図をセットアップしており、2 つの div をそれぞれ 5 列幅にすることに問題があります。2番目のdivに「最後」があるにもかかわらず、2番目のものは常に最初のものの下にジャンプします。
コードは次のとおりです。
<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; }