Question

我喜欢使用媒体对象模块背后的想法：

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的宽度时，有没有人有任何想法如何在液体布局容器中执行此操作？

提前致谢！

Answer 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/（不包括前缀）

Css媒体对象源顺序

1 个答案: