Polsterung Inhalte in grid-Spalten-layout

Ich bin mit dem Zurb Foundation framework zum erstellen des front-end - (http://foundation.zurb.com/docs/grid.php) und ich habe meine Basis-layout gut, keine Probleme.

Was ich mich Frage ist, wie pad die Inhalte in den Spalten? Alle Inhalte, ausgerichtet an der linken Seite wie man es erwarten würde, aber ich kann nicht sehen, ein Weg, um eine Polsterung, die ohne Anpassung des grid-layout-markup, oder erstellen viele Wrapper überall.

Beispielsweise die markup

<div class="container">
  <div class="row">
    <div class="eight columns customise-the-grid">
      <p>My main content</p>
      <ul><li>My item</li></ul>
      <!-- other various content -->
    </div>
    <div class="four columns">
      <div class="or-create-a-wrapper">
        <p>My main content</p>
        <ul><li>My item</li></ul>
        <!-- other various content -->
      </div>
    </div>
  </div>
</div>

Etwas css zu veranschaulichen

.customise-the-grid{
  padding: 10px;
}
.or-create-a-wrapper{
  padding: 10px;
}
Sie möchten, ändern Sie die Polsterung ohne hinzufügen von CSS? Ich verstehe es nicht, denke ich.

InformationsquelleAutor David Yell | 2011-12-01

  1. 3

    Ja, das war schon immer das problem mit den Grid-Systeme und non-fluid-designs. Nicht um Sie zu verhöhnen, obwohl Sie definitiv Ihre Vorteile haben gegen fluid-designs, aber Sie sind umständlich, mit zu arbeiten.

    Was ich tun würde, ist die Festlegung einer Marge auf das element innerhalb des Elements Sie möchten Polsterung auf. Wenn das Sinn macht.

    <div class="four columns">
  <div class="or-create-a-wrapper"><!-- margin here -->
    <p>My main content</p>
    <ul><li>My item</li></ul>
    <!-- other various content -->
  </div>
</div>

    ODER

    <div class="four columns">
  <div class="or-create-a-wrapper">
     <div class="another-div-yay"><!-- margin here -->
       <p>My main content</p>
       <ul><li>My item</li></ul>
      </div>
    <!-- other various content -->
  </div>
</div>

    InformationsquelleAutor Sean H Jenkins

  2. 1

    warum nicht noch padding oder margin, um die child-Elemente? so etwas wie 

    .columns * {margin:0px 10px}

    InformationsquelleAutor ptriek

  3. 0

    Können Sie erstellen einen wrapper mit Polsterung auf der übergeordneten column.

    <div class="container">
  <div class="row">
    <div class="eight columns customise-the-grid">
        <div class="small-12 content-wrapper column">  
          <p>My main content</p>
          <ul><li>My item</li></ul>
          <!-- other various content -->
        </div>
    </div>
    <div class="four columns or-create-a-wrapper">
      <div class="small-12 content-wrapper column">
        <p>My main content</p>
        <ul><li>My item</li></ul>
        <!-- other various content -->
      </div>
    </div>
  </div>
</div>
<style>
.customise-the-grid{
  padding: 10px;
}

.or-create-a-wrapper{
  padding: 10px;
}

.content-wrapper{
    background-color:lightgray;
    border-radius: 10px;
}
</style>

    Hier ist ein Turnschuh :
    https://jsfiddle.net/mantisse_fr/40cgg84u/

    InformationsquelleAutor Mantisse

Schreibe einen Kommentar