2

我已经更新了我的代码并制作了一个小提琴来解释我正在尝试做的事情。我之前也有过类似的问题，但并没有反映模板的流动性。

我有一个完全流畅的布局，我需要在另一个下制作一个 div 显示。

我想用 CSS 来做，我不想使用 javascript 或 jquery。

这是小提琴：http: //jsfiddle.net/sexywebteacher/7hCNC/20/

我可能不清楚： 我说的是小提琴中的 section1 和 section2 div

你认为这可以做到吗？

谢谢！

4

4 回答 4

4

如果图像和文本的高度都是可变的，那么使用纯 CSS 并不是特别容易。

高度是可变的排除任何基于position: absolute，如您收到的对您之前的类似问题的答案。

一种选择是使用此处显示的技术：http: //tanalin.com/en/articles/css-block-order/

可以使用 display: table family 的属性使用 CSS 表格表示来更改 HTML 页面上块的垂直顺序。不论HTML代码中的块顺序，table-header-group该表格的页眉（ ）显示在它的顶部，页脚（display: table-footer-group） - 在底部，表格主体（table-row-group） - 在页眉和页脚之间。

这适用于所有现代浏览器，如果你小心的话，还有 IE8。它在 IE6/7 中不起作用。

这是您使用此技术的代码：http: //jsfiddle.net/thirtydot/7hCNC/35/

我不得不承认我从未在生产网站上使用过这种技术，所以请彻底测试。

一种适用于所有支持 CSS3 2D 转换的浏览器的不同方法是垂直翻转整个容器，然后对“图像”和“文本”元素执行相同操作。在不支持 CSS3 转换的浏览器中，一切仍然有效，但“图像”和“文本”元素将按照原来的顺序排列。换句话说，它会很好地降解。使用 IE6-8 可能会使其工作filter，但这会使文本看起来很糟糕，所以忘记它。

这是您使用此技术的代码：http: //jsfiddle.net/thirtydot/7hCNC/36/

如果这些 CSS 方法都不够好，您将不得不使用 JavaScript。

不过，我个人建议你只在 HTML 中切换顺序。我怀疑谷歌是否关心它。在这种情况下，我真的怀疑向后弯曲以使您的 HTML 保持在“最佳顺序”是否会对 SEO 产生任何有意义的影响。

于 2012-05-02T14:12:03.280 回答
2

添加到 CSS 中的浮动 div “clearfix”类

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

例如：

<div class="column clearfix">
...
</div>
于 2012-05-02T13:22:30.683 回答
0

您可以将宽度更改为精确宽度（或将其添加为最小宽度）并让它们自然地相互落下，或者简单地清除这将迫使它们相互落下

例如

.clear {
  clear:both;
}

你的jsfiddle

于 2012-05-02T13:17:44.347 回答
0

这是clear的另一个例子。我喜欢在清除后的元素并不总是一致的情况下使用它。它使用伪元素来放置具有 clear 属性的空间。

.clear:after{
content:"."; 
line-height:0; 
height:0; 
display:block; 
clear:both; 
visibility:hidden;
}
于 2012-05-02T13:25:49.367 回答