4

Pure CSS を使用してサイトをレイアウトしていますが、問題が発生しました。ネストされたグリッド要素の間に空白がある場合、レイアウトが壊れ、最後の div が次の行にプッシュされます。それが私だけのものであるかどうかをテストするために、できるだけ少ないテスト Web サイトを作成しましたが、まだ問題が発生しています。

<html>
  <head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  </head>
  <body>
    <div class="pure-g">
      <div class="pure-u-1-2">
        <div class="pure-u-1-3">
          <p>Hello world</p>
        </div>
        <div class="pure-u-1-3">
          <p>Hello</p>
        </div>
        <div class="pure-u-1-3">
          <p>Hey there</p>
        </div>
      </div>
      <div class="pure-u-1-2">
        <p>Hi :)</p>
      </div>
    </div>
  </body>
</html>

このコードの結果は次のようになります。間違ったレイアウト

次のように、div の間から空白を取り除くと、

<div class="pure-u-1-3"><p>Hello world</p></div><div class="pure-u-1-3"><p>Hello</p></div><div class="pure-u-1-3"><p>Hey there</p></div>

それはそれ自体を修正します：

正しいレイアウト

この問題は、Chrome と Firefox の両方で発生しています。これは純粋な CSS の問題ですか、それとも私がひどく間違ったことをしているのですか?

編集: YUI Pure CSS に固有の解決策を見つけました。レイアウトをネストするには、列の各セットを独自の.pure-gdiv に含める必要があります。これについては、 Github issueで詳しく説明しています。

4

4 に答える 4

2

inline-blockこれは要素にも当てはまります。それらをコメントアウトします:

<div class="pure-u-1-2"><!--
    --><div class="pure-u-1-3"><p>Hello world</p></div><!--
    --><div class="pure-u-1-3"><p>Hello</p></div><!--
    --><div class="pure-u-1-3"><p>Hey there</p></div>
</div>
于 2014-05-29T07:32:30.297 に答える
1

この件に関するこの前のスレッドは、あなたにとって興味深いはずです。これは広範囲にテストされ、ここで議論されているので、このリンクに従ってください。

于 2014-05-29T07:52:57.733 に答える
0

display: inline-block要素間に空白がある場合、常にそれを保持します。要素間の空白を取り除くためのハックがいくつかあります。ここでいくつかの良いものを見つけることができます。個人的にはfont-size: 0pxハックが一番うまくいくと思いますが、EM で作業している場合は面倒かもしれません。

私が実際に提案するのは、float:leftの代わりに使用することですdisplay: inline-block。このようにして、それを機能させるために汚いハックを使用する必要がなくなります。

于 2014-05-29T09:41:15.220 に答える
0

空白はインライン要素のレンダリングに違いをもたらしますが、単一の空白を超えるものは常に 1 つの空白に削減されます。

sine css はpure-u-1-3-33.333%で 1 つの項目を分割しており、box( ) に 3 つを入れるとpure-u-1-2、完全なため、空白のスペースがありません。

したがって、空白を入れると、最後の div がスペース不足のために下がります。

于 2014-05-29T07:24:13.150 に答える