Помощник
|
Два div горизонтально, третий под ними |
valera-k
|
Сообщение
#1
|
||
|
|
||
|
|||
WoWeb |
24.6.2016, 15:38;
Ответить: WoWeb
Сообщение
#2
|
|
valera-k,
Попробуйте: Код .footer{
float:none; clear:both; } -------------------- |
|
|
falken |
24.6.2016, 16:33;
Ответить: falken
Сообщение
#3
|
|
valera-k, любитель говно-кода?) тогда первый способ вам не понравится - CSS нужно применять, а второй самое то! Стили в html коде, просто мечта, как вы и любите.
Способ 1. CSS: Код .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { zoom:1 } HTML: Код <div class="clearfix"> <div style="width:200px; float:left;"></div> </div> <div class="footer"></div> и футер никуда не убежит. в дальнейшем применяйте эту конструкцию везде, где нарушается поток. Способ 2. HTML: Код <div style="width:200px; float:left;"></div> <div style="clear:both;"></div> <div class="footer"></div> или Код <div style="width:200px; float:left; clear:both;"></div>
<div></div> <div class="footer"></div> -------------------- |
|
|
valera-k
|
Сообщение
#4
|
|
valera-k, любитель говно-кода?) тогда первый способ вам не понравится 1. Я так написал для наглядности и упрощения восприятия. 2. Вы сами то проверяли, то чего предлагаете? ваш вариант 1 размещает див В ДИВЕ, а не рядом, и обтекает его, чего быть не должно вариант 2 во всех браузерах все 3 дива один под другим. |
|
|
falken |
25.6.2016, 15:32;
Ответить: falken
Сообщение
#5
|
|
1. Я так написал для наглядности и упрощения восприятия. Для упрощения восприятия нужно показывать код как в исходниках (в идеале, чтобы вместо контента в блоках были поясняющие записи), а еще лучше наглядно демонстрировать на jsfiddle и детальней описывать задачу, ага? ваш вариант 1 размещает див В ДИВЕ, а не рядом, и обтекает его, чего быть не должно Так, лол, в чем проблема? Добавьте второй див и он будет обтекать первый, но при этом футер останется на своем месте: Код <div class="clearfix"> <div style="width:200px; float:left;"></div> <div></div> </div> <div class="footer"></div> Есть задача: Как footer оставить под двумя горизонтальными дивами? Задача, казалось бы, решена (футер не убегает): вариант 2 во всех браузерах все 3 дива один под другим. Если даете код, то поясняйте тогда что к чему и как на выходе должны располагаться блоки (все блоки)... А потом возмущаетесь что непонятный пустой контейнер куда-то делся. -------------------- |
|
|
Kumidzeke |
27.6.2016, 17:46;
Ответить: Kumidzeke
Сообщение
#6
|
|
Прочесть третью статью из выдачи гугла по запросу flexbox. И забыть про float.
Или добавлять как предложил товарищ falken clear: both; Лично я за первый вариант upd: Цитата в хроме и фоксе не работает, третий див убегает наверх Ничего подобного, в хроме ничего не убегает, следовательно проблемы на вашей стороне. http://codepen.io/anon/pen/dXvyPY Сообщение отредактировал Kumidzeke - 27.6.2016, 17:47 -------------------- Skype — Kumidzeke Vk — vk.com/za4me |
|
|
valera-k
|
Сообщение
#7
|
|
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией | 18 | Needmylink1 | 6543 | 25.3.2024, 20:51 автор: Needmylink1 |
|
Hyper.hosting - сервера под любые задачи [разрешены dmca, гэмблинг, адалт и пр.] Лучшие сервера по доступной цене |
30 | Hyper_Hosting | 8596 | 22.3.2024, 15:34 автор: Hyper_Hosting |
|
📌 Telegram Prime - софт для автоматизации telegram разработанный специально под задачи бизнеса 🏆 Единственный комбайн для популяризации вашей компании в теле |
14 | leviathan | 3272 | 21.3.2024, 18:54 автор: leviathan |
|
HideHost.net - Виртуальные и выделенные сервера под любые Ваши проекты с индивидуальным подходом. Работаем уже более 12 лет |
6 | HIDEHOST | 2311 | 21.3.2024, 13:33 автор: Tihohodka |
|
SEO-продвижение USA, Europe, Asia под ключ | Dating, Gambling, Essay и 10+ ниш | 1 | Needmylink1 | 661 | 17.3.2024, 12:58 автор: Needmylink1 |
Текстовая версия | Сейчас: 29.3.2024, 5:34 |