Съезжают блоки при уменьшении масштаба

@Rubidian · Регистрация: 01.11.2010

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

Вот есть пример.

HTML5
1
2
3
4
<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

CSS
1
2
3
.a { width: 200px; }
.b {width: 150px; float: left; }
.c {width: 50px; float: left; }

Блоки располагаются друг за другом, всё окей. Но если начать уменьшать масштаб окна, то блок C съедет вниз под блок B. Подскажите пожалуйста, как сделать так, чтобы при изменении масштаба страницы блоки не съезжали, а оставались на своих местах?

@Alorian · 22.11.2012, 09:43

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

Но если начать уменьшать масштаб окна, то блок C съедет вниз под блок B.

Нет, не съедет если там никаких отступов, бордеров и т.д. То есть если ширина четко соответствует 150 пикселей и 50 пикселей, то они должны поместиться в блок шириной 200 пикселей.

Скорее всего дело в этом у вас.

@Taatshi · 22.11.2012, 10:06

Rubidian, при уменьшении окна браузер пересчитывает размеры. Могут попасться моменты, где идет округление цифр, скорее всего в эти моменты и съезжает. Попробуйте задать ширину в процентах - по 50%

@Rubidian · 22.11.2012, 13:16 **[ТС]**

Alorian,в действительности там есть ещё отступы. Но вопрос в том, как сделать так, чтобы ничего не съезжало, когда пользователь уменьшает масштаб.

Taatshi, да, я понимаю, что пересчитывает размеры. Задавать в процентах не вариант, так как там всё подстроено по размерам. Нужно чтобы блоки всё равно не съзжали. Есть ещё какие-то решения?

@renkoman · 22.11.2012, 15:31

а нельзя было div-c в div-b запихнуть,чтоб не съежали,и задать только float:left блоку div-b а то обеим блокам задали float:left...как-то стрёмно

@Rubidian · 22.11.2012, 15:41 **[ТС]**

Если задать float только одному блоку, то они не встанут рядом.

@renkoman · 22.11.2012, 15:53

дык задайте блоку C float:right :/

@Rubidian · 22.11.2012, 16:00 **[ТС]**

Дык может вы сами сначала попробуете, что говорите, а потом будете советовать. Это никак не влияет в данном случае.

@renkoman · 22.11.2012, 16:08

а я и попробовал, я задал ещё высоту вашим блокам....а то только с шириной какой-то не приольно )вы бы сразу её указывали и не путали народ, а то указав ширину одну получается линия

@Rubidian · 22.11.2012, 16:10 **[ТС]**

Можете выложить код html и css?

@Rubidian · 24.11.2012, 21:47 **[ТС]**

Попробовал, ничего не получается. Тут проблема не в самих блоках, а в бордере, это происходит если добавить бордер. Вот код для примера, кто-то знает как решить проблему?

CSS
1
2
3
.a { width: 200px; }
    .b { width: 148px; height: 300px; border:1px solid #000; float: left; background: #ccc;}
    .c { width: 48px; height: 150px; border:1px solid #000; float: right; background: #c0c; }

HTML5
1
2
3
4
<div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>

И вообще не понял, причём тут запихивать блок C в блок B, если мне надо чтобы они рядом были, а не друг в друге.

@Snaker · 06.12.2013, 23:39

У меня в точности такая же проблема, поэтому люди, прошу помочь! Сам не знаю, что даже делать. Что в border это однозначно, так как все перековырял - проблема только в бордере. Браузер при увеличении мастшаба видимо увеличивает border, и вместе с бордером ширину блока.

@Smailuk · 16.10.2016, 23:23

Хоть тема создавалась уже давным давно, но думаю многим и сейчас будет полезно. Решением, как по мне, будет задать свойство всем блокам div свойства box-sizing: border-box;

CSS
1
2
3
div {
box-sizing: border-box;
}

можно также по ситуации добавить текстовые поля сюда же

CSS
1
2
3
div, input[type="text"] {
box-sizing: border-box;
}

Тут уже нужно эксперментировать... Мне помогло)

@jur76 · 19.10.2016, 15:46

убрать все float, и задать размер в em.

@Smailuk · 20.10.2016, 13:58

Так если убрать флоат, как тогда акуратно поумещать их всех в линию?

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	22.11.2012, 10:06
	Rubidian, при уменьшении окна браузер пересчитывает размеры. Могут попасться моменты, где идет округление цифр, скорее всего в эти моменты и съезжает. Попробуйте задать ширину в процентах - по 50% 0

@Rubidian 11 / 11 / 0 Регистрация: 01.11.2010 Сообщений: 94
	22.11.2012, 13:16 [ТС]
	Alorian,в действительности там есть ещё отступы. Но вопрос в том, как сделать так, чтобы ничего не съезжало, когда пользователь уменьшает масштаб. Taatshi, да, я понимаю, что пересчитывает размеры. Задавать в процентах не вариант, так как там всё подстроено по размерам. Нужно чтобы блоки всё равно не съзжали. Есть ещё какие-то решения? 0

@renkoman 8 / 8 / 0 Регистрация: 15.11.2012 Сообщений: 102
	22.11.2012, 15:31
	а нельзя было div-c в div-b запихнуть,чтоб не съежали,и задать только float:left блоку div-b а то обеим блокам задали float:left...как-то стрёмно 0

@Rubidian 11 / 11 / 0 Регистрация: 01.11.2010 Сообщений: 94
	22.11.2012, 15:41 [ТС]
	Если задать float только одному блоку, то они не встанут рядом. 0

@renkoman 8 / 8 / 0 Регистрация: 15.11.2012 Сообщений: 102
	22.11.2012, 15:53
	дык задайте блоку C float:right :/ 0

@Rubidian 11 / 11 / 0 Регистрация: 01.11.2010 Сообщений: 94
	22.11.2012, 16:00 [ТС]
	Дык может вы сами сначала попробуете, что говорите, а потом будете советовать. Это никак не влияет в данном случае. 0

@renkoman 8 / 8 / 0 Регистрация: 15.11.2012 Сообщений: 102
	22.11.2012, 16:08
	а я и попробовал, я задал ещё высоту вашим блокам....а то только с шириной какой-то не приольно )вы бы сразу её указывали и не путали народ, а то указав ширину одну получается линия Миниатюры 0

@Rubidian 11 / 11 / 0 Регистрация: 01.11.2010 Сообщений: 94
	22.11.2012, 16:10 [ТС]
	Можете выложить код html и css? 0

@Snaker 1 / 1 / 1 Регистрация: 12.04.2013 Сообщений: 7
	06.12.2013, 23:39
	У меня в точности такая же проблема, поэтому люди, прошу помочь! Сам не знаю, что даже делать. Что в border это однозначно, так как все перековырял - проблема только в бордере. Браузер при увеличении мастшаба видимо увеличивает border, и вместе с бордером ширину блока. 0

@jur76 0 / 0 / 3 Регистрация: 19.10.2016 Сообщений: 40
	19.10.2016, 15:46
	убрать все float, и задать размер в em. 0

@Smailuk 1 / 1 / 0 Регистрация: 24.02.2013 Сообщений: 22
	20.10.2016, 13:58
	Так если убрать флоат, как тогда акуратно поумещать их всех в линию? 0