Css媒体对象源顺序
Css媒体对象源顺序
提问于 2013-01-09 20:29:52
我喜欢使用媒体对象模块背后的想法，如下所述：
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
css可以应用于许多HTML模式，并且有一个很大的优势，那就是不管图像有多大，或者模块所在的容器有多大。
问题是，它依赖于媒体(例如图像)在源代码中排在第一位，就像这样
IMAGE
STARTCONTENTDIV
ENDCONTENTDIV当你在内容div中有这样的标题时，这就变成了一个语义问题：
IMAGE
STARTCONTENTDIV
H1
DESCRIPTION
ENDCONTENTDIV这样，h1就在图像之后，尽管它应该在图像之前，所以文档轮廓是有意义的。应该是这样的：
STARTCONTENTDIV
H1
DESCRIPTION
ENDCONTENTDIV
IMAGE当我们不知道图像或内容div的宽度时，有没有人知道如何在liquid布局容器中做到这一点？
提前感谢！
回答 1
Stack Overflow用户
发布于 2013-01-09 21:26:50
Flexbox允许您在不知道元素有多宽的情况下重新排列内容。缺点是对它的支持很差(IE10+，Opera，Chrome；当前的火狐遵循较旧的规范，但可以做这种布局)。
<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/ (不包括前缀)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14235247
复制相关文章
相似问题
腾讯云开发者
