Float и left - резиновая верстка

@zkotzzz · Регистрация: 22.01.2013

Студворк — интернет-сервис помощи студентам

Не могу понять что не так. Объясните, пожалуйста, почему слой с выравниванием по правому краю съежает на следующую строку?!

CSS
1
2
3
4
5
6
<style type='text/css'>
  .header{ width: 100%; }
  .logo{ background: red; float: left; width: 100px;}
  .center{ background: green; margin: 0px 100px; }
  .basket{ background: orange; float: right; width: 100px;}
</style>

HTML5
1
2
3
4
5
6
7
<body>
                <div class='header'>
                    <div class='logo'>dfgdf</div>
                    <div class='center'>dfgdf</div>
                    <div class='basket'>dfgffd</div>
                </div>
</body>

Вот картинка:

@Elmanderrr · 22.01.2013, 13:30

ты не задал обтекание <div class="center"> по этому последующий блок съезжает вниз.

@zkotzzz · 22.01.2013, 13:41 **[ТС]**

Сообщение от Elmanderrr

ты не задал обтекание <div class="center"> по этому последующий блок съезжает вниз.

CSS
1
2
3
4
5
6
<style type='text/css'>
  .header{ width: 100%;}
  .logo{ background: red; float: left; width: 100px;}
  .center{ background: green; float: left; margin: 0px 100px; }
  .basket{ background: orange; float: right; width: 100px;}
</style>

Но тогда он словно перестает быть резиновым...

А мне нужно чтобы он тянулся от левого до правого и при этом фон не исчезал... Как быть?

@Elmanderrr · 22.01.2013, 14:02

CSS
1
2
3
4
5
6
<style type='text/css'>
  .header{ width: 100%;}
  .logo{ background: red; float:left; width:33%;}
  .center{ background: green; width:33%; float:left;}
  .basket{ background: orange; width: 34%; float:left;}
</style>

вот так попробуй

@zkotzzz · 22.01.2013, 14:08 **[ТС]**

Сообщение от Elmanderrr

CSS
1
2
3
4
5
6
<style type='text/css'>
  .header{ width: 100%;}
  .logo{ background: red; float:left; width:33%;}
  .center{ background: green; width:33%; float:left;}
  .basket{ background: orange; width: 34%; float:left;}
</style>

вот так попробуй

Спасибо! Так оно работает! Но тогда сложно вычислить проценты 2-ух других, если один из блоков имеет фиксированную ширину(px)...

@Elmanderrr · 22.01.2013, 14:11

Я конечно тоже еще новичок. Но думаю что это уже мазохизмом назвать можно будет. Либо используй везде проценты, либо уж задавай всем блоками фиксированную величину в px. Я просто не могу понять зачем что-то задавать в px, а соседний, обтекаемый им элемент, в %, где такое используется то?

@zkotzzz · 22.01.2013, 14:24 **[ТС]**

Сообщение от Elmanderrr

Я конечно тоже еще новичок. Но думаю что это уже мазохизмом назвать можно будет. Либо используй везде проценты, либо уж задавай всем блоками фиксированную величину в px. Я просто не могу понять зачем что-то задавать в px, а соседний, обтекаемый им элемент, в %, где такое используется то?

CSS
1
2
3
4
5
6
<style type='text/css'>
  .header{ width: 100%; }
  .logo{ background: red; float: left; width: 100px;}
  .center{ background: green; margin: 0px 100px; }
  .basket{ background: orange; float: right; width: 100px;}
</style>

В самом начале как видишь я не использовал проценты. header{ width: 100%; } - это ширина их родителя. Но особо она роли не играет, можно её даже не указывать. Пусть будет так:

CSS
1
2
3
4
5
<style type='text/css'>
  .logo{ background: red; float: left; width: 100px;}
  .center{ background: green; margin: 0px 100px; }
  .basket{ background: orange; float: right; width: 100px;}
</style>

Но в любом случае последний слой съезжает вниз. Почему?! понять не могу, хотел чтоб кто-то на мысль натолкнул

Vovan-VE · 22.01.2013, 14:37

Сообщение от zkotzzz

HTML5
1
2
3
4
5
<div class='header'>
    <div class='logo'>dfgdf</div>
    <div class='center'>dfgdf</div>
    <div class='basket'>dfgffd</div>
</div>

center
↑↓
basket

HTML5
1
2
3
4
5
<div class='header'>
    <div class='logo'>dfgdf</div>
    <div class='basket'>dfgffd</div>
    <div class='center'>dfgdf</div>
</div>

@Elmanderrr · 22.01.2013, 14:49

Блин, действительно все настолько просто оказалось

Мне аж самому интересно стало. Я совсем не в том направлении мыслил. Спасибо что вмешался, Vovan-VE

@zkotzzz · 22.01.2013, 14:52 **[ТС]**

Сообщение от Vovan-VE

center
↑↓
basket

Спасибо! Теперь понял почему!!!

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@Elmanderrr 5 / 5 / 0 Регистрация: 21.01.2013 Сообщений: 45
	22.01.2013, 13:30
	ты не задал обтекание <div class="center"> по этому последующий блок съезжает вниз. 0

@Elmanderrr 5 / 5 / 0 Регистрация: 21.01.2013 Сообщений: 45
	22.01.2013, 14:11
	Я конечно тоже еще новичок. Но думаю что это уже мазохизмом назвать можно будет. Либо используй везде проценты, либо уж задавай всем блоками фиксированную величину в px. Я просто не могу понять зачем что-то задавать в px, а соседний, обтекаемый им элемент, в %, где такое используется то? 0

@Elmanderrr 5 / 5 / 0 Регистрация: 21.01.2013 Сообщений: 45
	22.01.2013, 14:49
	Блин, действительно все настолько просто оказалось Мне аж самому интересно стало. Я совсем не в том направлении мыслил. Спасибо что вмешался, Vovan-VE 0