1

我想用来+pad在p. 当我尝试通过使用延伸到我希望元素停止+pad的位置来添加填充时。这是我的意思的屏幕截图pp

在此处输入图像描述

您可以看到p黄色背景延伸到第 9 列的中间，这是图片停止的位置。我想p停在那里。当我使用+pad它时，它总是扩展它。同样的事情发生+prefix

这是我的苏西代码：

@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-boxbox-sizing 模型，否则会将 padding 添加到 span 宽度。如果要外跨度为 9，前缀为 1，则需要跨度为 8 并添加前缀。

  2. 相对填充基于父元素宽度，而不是当前元素，因此span-columns和pad或prefix应该始终传递相同的上下文参数。目前，这是错误的：

    .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 回答