1

+padにパディングを追加するために使用したいp。要素を停止させたい場所を超えて拡張+padを使用してパディングを追加しようとすると。ここに私が意味するもののスクリーンショットがありますpp

ここに画像の説明を入力

p写真が停止する 9 列目の中央を越えて黄色の背景が伸びているのがわかります。pそこでやめてほしい。使うときは+pad必ず伸ばす。同じことが起こります+prefix

これが私のSusyコードです：

@import compass
@import compass/css3
@import compass/layout
@import compass/utilities/lists/bullets
@import susy
@import normalize
@import base
@import media 

/* Susy Settings */

// $total-columns  : 5            
// $column-width   : 4em            
// $gutter-width   : 1em           
// $grid-padding   : $gutter-width

$total-columns  : 4
$column-width   : 60px            
$gutter-width   : 20px           
$grid-padding   : $gutter-width

$container-style: fluid

$tablet : 9
$desktop : 14

// Susy-grid-background override to draw out horizontal lines
=susy-grid-background       
  +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)          
/* -------------------DESKTOP ----------------------------------*/

+at-breakpoint($desktop)
  #page
    +container
    +susy-grid-background


  header
    +container
    +pull(.3)
    position: fixed
    left: 0
    right: 0
    top: 0
    height: 0
    padding-top: 0
    z-index: 3

    h1.logo
      +span-columns(2)
      font-size: 12px
      // background: green
      +hide-text
      margin-top: 0

      a
        // +span-columns(2)

        svg
          // background: red
          +leader(1)
          float: right
          width: 97px
          height: 38px

    .pagenav
      +span-columns(2)
      +leader(.5)
      clear: both
      // background: rgba(150,200,250,.3)

      li
        margin-bottom: 1em
        float: right
        clear: both
        a
          padding: 5px



  .main
    +span-columns(12 omega)
    // +leader(2)
    z-index: 1
    position: relative
    // background: rgba(1,240,200,.3)

    .image-group-title
      +span-columns(10, 14)
      padding: 1em 0
      +pad(1,0,10)
      +trailer(.5)


    // p
    //   +span-columns(4 omega, 14)

    img 
      +span-columns(10, 14)
      // clear: both

    .img-4-wide
      +span-columns(5, 14)


  .tile
    +isolate-grid(4, 12)
    +fluid-ratio(1/1, columns(4,12))


  #footer
    margin: 0 1em
    // background: pink
    height: 80px
4

1 に答える 1

0

いくつかのこと：

  1. border-boxボックス サイジング モデルを使用しない限り、スパン幅にパディングが追加されます。プレフィックス 1 で外部スパン 9 が必要な場合は、スパン 8 にプレフィックスを追加する必要があります。

  2. 相対的なパディングは、現在の要素ではなく、親要素の幅に基づいているためspan-columns、 and padorprefixには常に同じコンテキスト引数を渡す必要があります。現在、これは間違っています:

    .image-group-title
  +span-columns(10, 14)
  padding: 1em 0
  +pad(1,0,10)
  +trailer(.5)

    そのはず：

    .image-group-title
  +span-columns(10, 14)
  padding: 1em 0
  +prefix(1, 14)
  +trailer(.5)

あなたの例では、問題にどのコードが適用されているかが明確ではないpため、実際に質問に答えているかどうかを知るのは非常に困難ですが、それが役立つことを願っています.

于 2013-07-11T22:16:48.247 に答える