Как я могу предотвратить переполнение div с шириной контейнера 100%

62
6

Я пытаюсь найти аккуратный способ получить мой заголовок шириной 100% (поэтому я могу использовать цвет фона, который распространяется по всей странице), но и внутри него у меня есть два изображения, которые я бы хотел оставайтесь в очереди, а не переполняйте друг друга или нажимайте друг на друга.

В настоящее время у меня есть следующий CSS:

header {    
width: 100%;
height: 150px;
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;}

#logo {
float: left;
width: 800px;}

#phone { float: left; width: 200px; }

Логотип и телефон находятся внутри заголовка. Если вы посмотрите на него в действии (www.dweeman.com/eb/sitetemplate.html), вы можете увидеть, если вы его размер до определенной точки, информация о телефоне подталкивается под баннер. Я могу установить его на статическую ширину, но тогда это проблема с разными размерами в Интернете.

Я создал дополнительный div внутри заголовка, в который я только что положил логотип, и оставил телефон снаружи. Это дает мне результаты, которые я хочу, но мне интересно, был ли более быстрый способ достичь этого без дополнительного div.

(Также извините за форматирование раздела кода, у меня возникли проблемы с его форматированием. Кажется, что он не работает должным образом)

спросил(а) 2021-01-19T19:15:27+03:00 2 месяца, 3 недели назад
1
Решение
62

Сократите свою страницу и используйте% unit в дополнении тоже.

header {    
width: 84%;
height: 150px;
padding: 5% 5% 1% 5%;
clear: both;
background: #185f96;}

#logo {
float: left;
width: 800px;}

ответил(а) 2021-01-19T19:15:27+03:00 2 месяца, 3 недели назад
44

Установите width в процентах, а затем добавьте white-space:nowrap; header чтобы предотвратить переход от новой строки


header {    
width: 100%;
height: 150px;
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;
white-space:nowrap; /*added*/
}

#logo {
float: left;
display:inline-block; /* or width in percentage */
}

#phone {
float: left;
min-width: 20%; /* ammended */
}

ответил(а) 2021-01-19T19:15:27+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема