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 回答