0

助けてください。

私は Bourbon Neat 1.7 を使用しており、2 行目を追加して表示しようとしています。現在表示されているすべての情報は 1 行に表示されますが、2 行にする必要があります。私の計画は、レコード セットを添付して、行ごとにレコードを表示することです。

私のscssコード

.third {
    @include outer-container;
    background-color: #afa;

    .alpha3 {
        @include fill-parent();
        @include row(table);
        margin-bottom: 0;
        padding: 0;
        background-color: #aaf;

        .aside3 {
            @include span-columns(4);
            @include pad();
            border: 1px solid black;
            background-color: #faa;
        }

        .article3 {
            @include span-columns(8);
            @include pad();
            @include reset-display;
            background-color: #faa;
        }
    }
}

HTML コード

<div class="third">
    <p>div class third  </p>
    <div class ="alpha3">
        <div class ="aside3">
            <p>1st Col 1st row </p>
        </div>
        <div class ="article3">
            <p>2nd Col 1st row</p>
        </div>
        <div class ="aside3">
            <p>1st Col 2nd row</p>
        </div>
        <div class ="article3">
            <p>2nd Col 2nd row</p>
        </div>
     </div>
</div>
4

1 に答える 1

0

表示ではtable、row 要素は表 (この場合は.alpha3) になり、事実上、そのすべての子をラップせずに収めようとします (表はラップしません)。

.alpha32 番目の行をホストする追加の要素を作成する必要があります。

<div class="third">
  <p>div class third</p>
  <div class ="alpha3">
     <div class ="aside3"><p>1st Col 1st row </p></div>
     <div class ="article3"><p>2nd Col 1st row</p></div>
  </div>

  <div class ="alpha3">
    <div class ="aside3"><p>1st Col 2nd row </p></div>
    <div class ="article3"><p>2nd Col 2nd row</p></div>
  </div>
</div>
于 2014-10-27T09:02:13.100 に答える