Вопрос по css – Сделайте отображение div под другим, используя CSS в абсолютно гибком макете
Я обновил свой код и сделал скрипку, которая объясняет, что я пытаюсь сделать. У меня был похожий вопрос раньше, но он не отражал текучесть шаблона.
у меня естьtotally fluid layout и мне нужноmake a div display under another.
Я хочу сделать это с помощью CSS, и я предпочитаю не использовать javascript или jquery.
Вот скрипка: http://jsfiddle.net/sexywebteacher/7hCNC/20/
Мне было возможно неясно I am talking about the section1 and section2 divs in the fiddle
Как вы думаете, это можно сделать?
Спасибо!
div снова под этим?
Tom Abraham
Вы можете либо изменить ширину на точную ширину (или добавить ее как минимальную ширину), и позволить им естественным образом упасть друг под друга, либо просто очистить, что заставит их подойти друг другу
например
.clear {
clear:both;
}
вашjsfiddle
Вот еще один очевидный пример. Мне нравится использовать это в тех случаях, когда элемент после очистки не всегда соответствует. Он использует элементы psuedo для размещения пробела с атрибутом clear.
.clear:after{
content:".";
line-height:0;
height:0;
display:block;
clear:both;
visibility:hidden;
}
Если и высота изображения, и текст являются переменными, это не особенно легко с чистым CSS.
Переменная высота исключает что-либо на основеposition: absoluteкак в ответах, которые вы получили наваш предыдущий похожий вопрос.
Одним из вариантов является использование техники, показанной здесь:http://tanalin.com/en/articles/css-block-order/
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, если вы осторожны. Этоdoes not работа в IE6 / 7.
Вот ваш код, использующий эту технику:http://jsfiddle.net/thirtydot/7hCNC/35/
Я должен признать, что я никогда не использовал эту технику на производственном веб-сайте, поэтому, пожалуйста, тщательно протестируйте.
Другой подход, который будет работать ввсе браузеры, которые поддерживают CSS3 2D-преобразования состоит в том, чтобы перевернуть весь контейнер по вертикали, а затем сделать то же самое с «изображением» и & quot; текст & quot; элементы. В браузерах, которые не поддерживают преобразования CSS3, все будет работать, но & quot; изображение & quot; и & quot; текст & quot; элементы будут в их первоначальном порядке. Другими словами, это хорошо ухудшается. Возможно, это можно будет сделать в IE6-8, используяfilter, но это сделало бы текст ужасным, так что забудьте об этом.
Вот ваш код, использующий эту технику:http://jsfiddle.net/thirtydot/7hCNC/36/
Если ни один из этих методов CSS не достаточно хорош, вам придется использовать JavaScript.
Тем не менее, я лично рекомендую вам простопереключить порядок в HTML, Я сомневаюсь, что Google заботитсяоб этом, В этом случае я действительно сомневаюсь, что изгиб назад, чтобы сохранить ваш HTML в «оптимальном порядке» будет иметь какое-либо значимое влияние SEO.
float: none; на элементах. Просто совет!
Добавить в плавающий div"clearfix" класс где в CSS
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
Например:
<div class="column clearfix">
...
</div>