Вопрос по css – Сделайте отображение div под другим, используя CSS в абсолютно гибком макете

2

Я обновил свой код и сделал скрипку, которая объясняет, что я пытаюсь сделать. У меня был похожий вопрос раньше, но он не отражал текучесть шаблона.

у меня есть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
Эй, ты! Я говорю о "разделе 1" и "раздел2"; Дивы в скрипке webmasters

Ваш Ответ

4   ответа
0

Вы можете либо изменить ширину на точную ширину (или добавить ее как минимальную ширину), и позволить им естественным образом упасть друг под друга, либо просто очистить, что заставит их подойти друг другу

например

.clear {
  clear:both;
}

вашjsfiddle

Эй, ты! Я говорю о "разделе 1" и "раздел2"; Дивы в скрипке. Моя ошибка в том, что я не прояснил webmasters
0

Вот еще один очевидный пример. Мне нравится использовать это в тех случаях, когда элемент после очистки не всегда соответствует. Он использует элементы psuedo для размещения пробела с атрибутом clear.

.clear:after{
content:"."; 
line-height:0; 
height:0; 
display:block; 
clear:both; 
visibility:hidden;
}
4

Если и высота изображения, и текст являются переменными, это не особенно легко с чистым 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.

Ты очень за отличный ответ! webmasters
Для техники вtanalin.com/en/articles/css-block-order Я не могу заставить его работать, пока я не установлюfloat: none; на элементах. Просто совет!
2

Добавить в плавающий 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>
)) только для тебяjsfiddle.net/BKRyT
+1 ты меня просто побил.
Я действительно не понимаю, не могли бы вы показать мне в скрипке? :( webmasters

Похожие вопросы