0

ここで説明されているように、メディア オブジェクト モジュールを使用する背後にあるアイデアが気に入っています。

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

多くの HTML パターンに適用できる css であり、画像の大きさやモジュールが含まれるコンテナの大きさに関係ないという大きな利点があります。

問題は、このようにソースの最初に来るメディア (画像など) に依存していることです。

    IMAGE
    STARTCONTENTDIV
    ENDCONTENTDIV

そのコンテンツ div 内に次のような見出しがある場合、これはセマンティックな問題になります。

    IMAGE
    STARTCONTENTDIV
      H1
      DESCRIPTION
    ENDCONTENTDIV

このように、h1は画像の前にあるはずですが、画像の後にあるため、ドキュメントのアウトラインは理にかなっています。次のようになります。

    STARTCONTENTDIV
      H1
      DESCRIPTION
    ENDCONTENTDIV
    IMAGE

画像またはコンテンツ div の幅がわからない場合に、リキッド レイアウト コンテナーでこれを行う方法を知っている人はいますか?

前もって感謝します！

4

1 に答える 1

1

Flexbox を使用すると、要素の幅を知らなくてもコンテンツを再配置できます。欠点は、サポートが貧弱であることです (IE10+、Opera、Chrome。現在の Firefox は古い仕様に従っていますが、このレイアウトを行うことができます)。

<div class="container">
  <div class="child">
    <h1>Title Here</h1>

    <p>Paragraph o' text</p>
  </div>

  <img class="child" />
</div>

.container {
  display: flex;
}

div.child {
  flex: 1 1 auto;
  order: 2;
}

img.child {
  flex: 0 0 auto;
  order: 1;
}

http://jsfiddle.net/CNWGn/ (プレフィックスは含まれていません)

于 2013-01-09T13:26:50.463 に答える