Css 媒体对象源顺序答案

【问题标题】：Css Media Object Source OrderCss 媒体对象源顺序
【发布时间】：2013-01-09 12:29:51
【问题描述】：

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

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 的宽度时，是否有人知道如何在液体布局容器中执行此操作？

提前致谢！

【问题讨论】：

标签： css oocss

【解决方案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/（不包括前缀）

【讨论】：

这个答案真的很有用——我很感激它，flexbox 是我有一天会研究的东西！ ...但我真的应该说我正在寻找更多跨浏览器的东西。 OOCSS 媒体对象在 ie6 中工作，所以我希望也能做到这一点。我有一种感觉，什么都不会。我认为您至少需要知道其中一个的宽度。
“OOCSS 媒体对象”没有什么特别之处：它使用了一直存在的样式属性。以您想要的方式重新排列内容的唯一另一种方法是通过绝对定位，这通常不灵活，并且需要知道图像的尺寸。
我想我只是希望其他人会使用该技术并想出一种减少源依赖的方法。我想这个问题在这个意义上有点误导。希望能够在不知道任何尺寸的情况下将一些东西浮动到源代码中后面的东西的左边，但必须等待......无论如何再次感谢