X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Два div горизонтально, третий под ними
valera-k
valera-k
Topic Starter сообщение 24.6.2016, 15:24; Ответить: valera-k
Сообщение #1


Возникла проблема, в опере и ie все нормально, в хроме и фоксе не работает,
третий див убегает наверх

<div style="width:200px; float=left;"></div>
<div></div>
<div class="footer"></div>

Как footer оставить под двумя горизонтальными дивами?


0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WoWeb
WoWeb
сообщение 24.6.2016, 15:38; Ответить: WoWeb
Сообщение #2


valera-k,

Попробуйте:
Код
.footer{
float:none;
clear:both;
}


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
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>


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
valera-k
valera-k
Topic Starter сообщение 25.6.2016, 11:07; Ответить: valera-k
Сообщение #4


Цитата(falken @ 24.6.2016, 15:33) *
valera-k, любитель говно-кода?) тогда первый способ вам не понравится


1. Я так написал для наглядности и упрощения восприятия.
2. Вы сами то проверяли, то чего предлагаете?
ваш вариант 1 размещает див В ДИВЕ, а не рядом, и обтекает его, чего быть не должно
вариант 2 во всех браузерах все 3 дива один под другим.



Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 25.6.2016, 15:32; Ответить: falken
Сообщение #5


Цитата(valera-k @ 25.6.2016, 10:07) *
1. Я так написал для наглядности и упрощения восприятия.

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

Цитата(valera-k @ 25.6.2016, 10:07) *
ваш вариант 1 размещает див В ДИВЕ, а не рядом, и обтекает его, чего быть не должно

Так, лол, в чем проблема? Добавьте второй див и он будет обтекать первый, но при этом футер останется на своем месте:

Код
<div class="clearfix">
    <div style="width:200px; float:left;"></div>
    <div></div>
</div>
<div class="footer"></div>


Есть задача:
Цитата(valera-k @ 24.6.2016, 14:24) *
Как footer оставить под двумя горизонтальными дивами?

Задача, казалось бы, решена (футер не убегает):
Цитата(valera-k @ 25.6.2016, 10:07) *
вариант 2 во всех браузерах все 3 дива один под другим.


Если даете код, то поясняйте тогда что к чему и как на выходе должны располагаться блоки (все блоки)... А потом возмущаетесь что непонятный пустой контейнер куда-то делся.


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kumidzeke
Kumidzeke
сообщение 27.6.2016, 17:46; Ответить: Kumidzeke
Сообщение #6


Прочесть третью статью из выдачи гугла по запросу flexbox. И забыть про float.

Или добавлять как предложил товарищ falken clear: both;

Лично я за первый вариант :D

upd:
Цитата
в хроме и фоксе не работает, третий див убегает наверх

Ничего подобного, в хроме ничего не убегает, следовательно проблемы на вашей стороне.

http://codepen.io/anon/pen/dXvyPY

Сообщение отредактировал Kumidzeke - 27.6.2016, 17:47


--------------------
Telegram — @za4me
Skype — Kumidzeke
Vk — vk.com/za4me


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
valera-k
valera-k
Topic Starter сообщение 27.6.2016, 23:00; Ответить: valera-k
Сообщение #7


Цитата(Kumidzeke @ 27.6.2016, 16:46) *
Прочесть третью статью из выдачи гугла по запросу flexbox. И забыть про float.


Реально удобная штука.

Спасибо за подсказку.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией
18 Needmylink1 6538 25.3.2024, 20:51
автор: Needmylink1
Горячая тема (нет новых ответов) Hyper.hosting - сервера под любые задачи [разрешены dmca, гэмблинг, адалт и пр.]
Лучшие сервера по доступной цене
30 Hyper_Hosting 8586 22.3.2024, 15:34
автор: Hyper_Hosting
Открытая тема (нет новых ответов) 📌 Telegram Prime - софт для автоматизации telegram разработанный специально под задачи бизнеса
🏆 Единственный комбайн для популяризации вашей компании в теле
14 leviathan 3271 21.3.2024, 18:54
автор: leviathan
Открытая тема (нет новых ответов) HideHost.net - Виртуальные и выделенные сервера под любые Ваши проекты с индивидуальным подходом.
Работаем уже более 12 лет
6 HIDEHOST 2304 21.3.2024, 13:33
автор: Tihohodka
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыSEO-продвижение USA, Europe, Asia под ключ | Dating, Gambling, Essay и 10+ ниш
1 Needmylink1 659 17.3.2024, 12:58
автор: Needmylink1


 



RSS Текстовая версия Сейчас: 28.3.2024, 13:56
Дизайн