0

グリッド システムとしてSemantic.gsを使用しています。ネストされた列の例に従って、可能な限りグリッドをたどりながら、必要なものを作成しようとしています。Semantic.gs の入れ子になった列のサンプル コードを考える:

HTML

<article>
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
   </ul>
</article>

以下

article {
   .column(9);

   ul {
      .row(9);

      li {
         .column(6,9);
      }
   }
}

私の質問は、可能な限りグリッド システム (semantic.gs) に準拠しながら、ネストされた列の親にパディング (理想的にはガターと同じ幅) を追加するための最良の方法は何ですか? 注、私は 960px の固定レイアウトを使用しています。

これは、ベージュ色の親要素の左右のパディングで達成しようとしているものの例(Photoshop、上記のコードによるとは限りません)の画像です:

ここに画像の説明を入力

更新: Sandeeps の例に従って、これを行うことができましたが、960px グリッドを使用しているとは言いませんでした。ここに私の結果があります: http://bit.ly/M5fr5N .

4

1 に答える 1

0

これには、CSS box-sizingプロパティを使用できます。次のように書きます。

#maincolumn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background: none repeat scroll 0 0 red;
    display: inline;
    float: left;
    margin: 0 1.04167%;
    width: 72.9167%;
}
于 2012-05-30T04:38:40.573 に答える