Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 42
1

почему сбрасывается background родителя, когда в нем 3 элемента с float:left?

26.08.2013, 14:46. Показов 2213. Ответов 5
Метки нет (Все метки)

http://jsfiddle.net/7MTZf/
вот собственно, с двумя флоатами работает, с третьим бэкграунд пропадает
если невозможно сделать с тремя флоатами с бэкграундом (Оо) то подскажите как в строчку их разместить, inline и inline-block пробовал, там там вроде такой же косяк.
и еще попутный вопрос в третьем флоате должна быть картинка, как сделать чтобы она не растягивалась на весь блок и далее если не влезает, и была по центру? проценты игноирует, а мне хотелось бы именно в них задать.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="container">
 
<div id="block1">
111
</div>
 
<div id="block2">
222
</div>
 
<div id="block3">
333
</div>
 
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container {
background-color:black;
width:100%:    
    
 
}
#block1 {
float:left;
height:40px;
}
#block2 {
height:40px;
float:left;
}
#block3 {
height:40px;
 
float:left;
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
26.08.2013, 14:46
Ответы с готовыми решениями:

Когда делаю Float left пропадает фон у родительского элемента, точнее он есть но браузеру на него все равно
Вобщем верстал футер он у меня должен быть вот таким пока он у меня вот такой но как только...

Задаю float:left - не показывает фон родителя
Почему когда задаю float: left class'у Block, то у меня не показывает фон wraperr'a? &lt;html&gt;...

Исчезает фон меню, когда к селектору идентификаторов menu ul li применяю значение float: left;
Добрый день, уважаемые участники форума. Я в вёрстке пока ещё новичок, и очень прошу ваш совет. А...

Ошибка при создании трех колонок (float:left, float:right и margin:0 auto;)
3-й час бьюсь, но никак не могу понять, что не так делаю. почему оранжевый блок опускается? ...

5
13201 / 6588 / 1040
Регистрация: 10.01.2008
Сообщений: 15,069
26.08.2013, 17:16 2
Весь контент - float. Нет нормального контента - родитель схлопнулся по высоте до нуля.
CSS
1
2
3
4
5
6
#container:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}
1
1014 / 671 / 290
Регистрация: 04.04.2013
Сообщений: 2,686
27.08.2013, 16:22 3
Просто добавьте одну строчку:
CSS
1
2
3
4
5
#container {
background-color:black;
width:100%:    
overflow: hidden;
}
0
13201 / 6588 / 1040
Регистрация: 10.01.2008
Сообщений: 15,069
27.08.2013, 16:43 4
Цитата Сообщение от 35cm Посмотреть сообщение
Просто добавьте одну строчку:
CSS
5
overflow: hidden;
Неоправданный overflow:hidden; , когда его можно избежать. Аккутарно кладем грабли себе под ноги.
Да и float'а можно избежать, скорее всего.
1
1014 / 671 / 290
Регистрация: 04.04.2013
Сообщений: 2,686
28.08.2013, 17:01 5
Цитата Сообщение от Vovan-VE Посмотреть сообщение
Неоправданный overflow:hidden
Что значит неоправданный? Зачем столько кода громоздить если можно обойтись данным свойством.
0
13201 / 6588 / 1040
Регистрация: 10.01.2008
Сообщений: 15,069
28.08.2013, 20:28 6
Цитата Сообщение от 35cm Посмотреть сообщение
Что значит неоправданный?
Значит, что Вы используете не то, что он делает в первую очередь, а побочный эффект, который из этого вытекает. И всё это при том, что есть другой, более целенаправленный способ: clear делает только то, что нужно, и ничего лишнего.
Цитата Сообщение от 35cm Посмотреть сообщение
Зачем столько кода громоздить если можно обойтись данным свойством.
Конечно, проще бросить грабли посреди дороги, чем отнести их в сарай на место.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.08.2013, 20:28

Почему такое поведение у float-элемента, и как исправить?
Здравствуйте, коллеги. Наткнулся на странное поведение у float-элемента, после диагностики...

float:left
у меня есть блок не фиксированной высоты с определенным фоном , внутри блоки с float:left (в них...

float: left
У меня выводится 4 изображения в горизонтальном порядке и до бесконечности в вертикальном. CSS: ...

Не работает float:left
Здравствуйте почему-то не работает float:right { border:0px solid #000; position:absolute; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru