0

ページ レイアウト内に 3 つの列を配置するのに本当に苦労しています。

私はセマンティック CSS のみを使用しており、今のところ独自の CSS は使用していません。私はちょうどグリッドのものに頭を包み込もうとしています。

これは私の完全な本文です：

    <div class="ui page grid">
      <header class="sixteen wide column">
        <div class="ui segment">Header text.</div>
      </header>
      <div class="ui divided grid">
        <div class="eight wide column">
          <div class="ui segment">Left text</div>
        </div>
        <div class="eight wide column">
          <div class="ui segment">Right text</div>
        </div>
      </div>
      <div class="ui three column grid">
        <div class="column">
          <div class="ui segment">1</div>
        </div>
        <div class="column">
          <div class="ui segment">2</div>
        </div>
        <div class="column">
          <div class="ui segment">3</div>
        </div>
      </div>
      <footer class="sixteen wide column">
        <div class="ui segment">Footer text.</div>
      </footer>
    </div>

全幅の列を取得する方法を理解しています。これは冗長ですが、機能します。

.sixteen.wide.column 要素を使用して、2 つの半幅の列を取得することもできます。

しかし、16 は 3 で割り切れないため、これを使用して 3 つの列を取得しようとしています。

      <div class="ui three column grid">
        <div class="column">
          <div class="ui segment">1</div>
        </div>
        <div class="column">
          <div class="ui segment">2</div>
        </div>
        <div class="column">
          <div class="ui segment">3</div>
        </div>
      </div>

上記のコードは、次のドキュメント ページから取得されます: http://semantic-ui.com/collections/grid.html

残念ながら、私はこれを取得します：

ようこそ Shopify UI 要素ジェネレーター 2014-03-16 15-08-56 2014-03-16 15-09-05

幅の問題は、次の CSS に起因するようです。

 .ui.grid > .column, .ui.grid > .row > .column {
   width: 6.25%;
 }

いいえ、どこかに追加のクラスが必要ですか、それとも追加のマークアップが必要ですか?

どうもありがとう！

4

2 に答える 2

2

どうぞ：

<div class="ui three column grid">
  <div class="column">
    Content
  </div>
  <div class="column">
    Content
  </div>
  <div class="column">
    Content
  </div>
</div>
于 2015-11-06T04:59:01.587 に答える
0

同様の問題がありました！

その方法は次のとおりです。

    <div class="ui divided grid stackable">

        <div class="three column row">

         <div class="column wide"> 
          <p> Your stuff here </p>
         </div>

         <div class="column wide">
         <p> Your stuff here </p>
         </div>

         <div class="column wide">
          <p> Your stuff here </p>
         </div>

        </div>

   </div>
于 2014-03-31T21:09:19.790 に答える