Использование процента `ширина: 100%` с учетом элементов `float: left`

Question

У меня есть это , и он получил HTML img#logo-image, в некоторых случаях он не будет отображаться, display:none.

Проблема в том, что все div#menu-title должно соответствовать ширине страницы. Я попытался поставить width:100%, но когда отображается img#logo-imag ", он разрывает линию, находящуюся ниже img#logo-image.

width:100% не работает с элементами float:left

Answer 1

Просто откройте div меню-заголовка и удалите ширину .. тогда он автоматически будет равен 100% от заголовка ... и, если изображение присутствует, он настроит список ul#menu, чтобы освободить место для него, что естественное поведение

если вы хотите, чтобы список меню действительно принимал только доступную ширину (скажем, для цвета фона или чего-то еще, вы можете добавить overflow: hidden; к ul#menu - хотя я не вижу необходимости в этом в вашем примере код

вот упрощенная версия вашей скрипки - наведите курсор на заголовок, чтобы изображение исчезло, и вы увидите, что ul#menu настроено в соответствии с

Пример Fiddle

Answer 2

У вас есть логотип-изображение и заголовок меню, плавающие слева.Поскольку они на самом деле не находятся в отдельных div, они все являются частью одного div, они появляются рядом друг с другом.Кроме того, вы устанавливаете заголовок меню на 760, который не является шириной страницы.По крайней мере, так выглядело, как вы.Не используйте ширину 100%, потому что изменение размера страницы приведет к сокращению заголовка меню.

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

И при использовании функции проверки элементов Chrome я не вижу экран: ни один для css изображения.Я не знаю, почему это так.

Answer 3

Я действительно не уверен в том, чего вы пытаетесь достичь, так как ширина div-заголовка меню div #: 100% не оставляет места для чего-либо еще в той же строке.

Почему бы и нетпусть они оба будут встроены, и пусть ширина будет такой, какой она должна быть?

В любом случае, я догадываюсь, что вы хотите.Вы хотите, чтобы эти два элемента вели себя как в таблице, внутри строки таблицы, и каждый в ячейке таблицы, чтобы изображение занимало максимальную ширину, а div # menu-title занимал все остальное место.В этом случае поместите их в таблицу или используйте display: table-cell для изображения и div и возитесь с этим.