使用CSS在另一个使用完全流动布局的div下显示 [英] Make a div display under another using CSS in a totally fluid layout

问题描述

我更新了我的代码，并做了一个小提琴，这解释了我想做什么。我之前有一个类似的问题，但它没有反映模板的流动性。

I have updated my code and made a fiddle which explains what I am trying to do. I had a similar question before but it did not reflect the fluidity of the template.

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

I have a totally fluid layout and I need to make a div display under another.

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

I want to do it with CSS and I'd prefer not to use javascript or jquery.

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

我可能不清楚：
我在谈论section1和section2

I was maybe unclear: I am talking about the section1 and section2 divs in the fiddle

您认为可以这样做吗？

谢谢！ / p>

Thank you!

推荐答案

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

If both the height of the image and the text are variable, it's not particularly easy with pure CSS.

高度是可变的，基于 position：absolute 排除任何东西，就像您在您以前的类似问题。

The height being variable rules out anything based on position: absolute, as in the answers you received to your previous similar question.

一个选项是使用此处所示的技术： http：/ /tanalin.com/en/articles/css-block-order/

One option is to use the technique shown here: http://tanalin.com/en/articles/css-block-order/

可以更改块的垂直顺序在HTML页面上使用
使用display：table family属性的CSS表表示。
在HTML代码中的块顺序的标准，
这样的表的标题（ table-header-group ）显示在它的顶部， display：
table-footer-group ） - 在底部和表主体
（ table-row- / code>） - 在标题和页脚之间。

It is possible to change vertical order of blocks on HTML page using CSS table presentation using properties of display: table family. Regardles of block order in HTML code, header (table-header-group) of such table is displayed at the top of it, footer (display: table-footer-group)—at the bottom, and table body (table-row-group)—between header and footer.

这适用于所有现代浏览器和IE8 。 不适用于IE6 / 7。

This works in all modern browsers, and IE8 if you're careful. It does not work in IE6/7.

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

Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/35/

我必须承认我从未在生产网站上使用此技术，因此请彻底测试。

I have to admit that I've never used this technique on a production website, so please test thoroughly.

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

A different approach that will work in all browsers that support CSS3 2D transforms is to vertically flip the whole container, and then do the same to the "image" and the "text" elements. In browsers that do not support CSS3 transforms, everything will still work, but the "image" and "text" elements will be in their original order. In other words, it degrades nicely. It's probably possible to make this work in IE6-8 using filter, but that would make the text look horrible, so forget about it.

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

Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/36/

如果这些CSS方法都不够好，就必须使用JavaScript。

If none of these CSS methods are good enough, you'll have to use JavaScript.

但是，我个人建议您只是切换HTML中的顺序。我怀疑Google关心关于它 a>。在这种情况下，我真的怀疑向后弯曲以保持HTML在最佳顺序将有任何有意义的SEO影响。

However, I personally recommend that you just switch the order in the HTML. I doubt Google cares about it. In this case, I really doubt that bending over backwards to keep your HTML in the "optimum order" will have any meaningful SEO impact.

这篇关于使用CSS在另一个使用完全流动布局的div下显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！