Сжатие плавающего div вместо перехода на новую строку

Есть ли способ заставить плавающий div сжиматься вместо перехода на новую строку?

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

#left {
  float: left;
  border: 1px solid #000;
}

#right {
  float: right;
  border: 1px solid #000;
}
<div id="left">
  <p>This div represents the logo</p>
</div>
<div id="right">
  <p>When the window's width is reduced and these divs touch I want this div to shrink instead of falling to the next line.
  </p>
</div>

По сути, я хочу, чтобы #right начал сжиматься, когда окно браузера сжимается, а не сначала отбрасывать строку, а затем сжиматься при дальнейшем изменении размера окна.


person George Kendros    schedule 26.11.2010    source источник
comment
Один из эффектов Floating DIv заключается в том, что он сжимается до своей внутренней ширины, поэтому вам нужно будет показать некоторый код, чтобы мы могли понять, почему он также переходит на новую строку.   -  person Chris Bentley    schedule 26.11.2010
comment
Я отредактировал приведенные выше сообщения и добавил пример кода.   -  person George Kendros    schedule 26.11.2010


Ответы (2)


Пробовали ли вы экспериментировать с указанием относительной (например, в процентах) ширины этих двух элементов div?

Когда вы плаваете без явного объявления ширины, фиксированной или относительной, размеры по умолчанию будут равны «авто». Auto заставит div быть шириной его содержимого. Когда браузер сжимается, содержимое по-прежнему будет заставлять эти поля иметь эту ширину, пока оно не будет принудительно свернуто, касаясь другого элемента.

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

Существует множество ресурсов, которые могут помочь вам добиться более гибкого макета (во многих статьях на сайте www.alistapart.com это довольно подробно обсуждается).

person Jon    schedule 26.11.2010
comment
Это сработало отлично. Я просто вычислил, какую минимальную ширину я хотел поддерживать, вычел ширину моего логотипа div, а затем взял оставшуюся ширину в процентах (т.е. минимальная ширина 700 пикселей - 140 пикселей логотипа div = 560 пикселей или 80%) - person George Kendros; 27.11.2010

Свойству CSS display установите для него значение inline, и div будет вести себя как span.

person cambraca    schedule 26.11.2010
comment
Он все еще переходит на следующую строку. Строка имеет левый плавающий элемент и правый плавающий элемент на ней (логотип плавает влево, меню плавает вправо) - person George Kendros; 26.11.2010
comment
Я не могу придумать способ решить эту проблему без таблиц. Я ненавижу делать макет с таблицами... Я знаю, что это путь Сатаны.... - person cambraca; 26.11.2010
comment
Это единственный путь, по которому я пойду с фиксированной шириной перед столами. - person George Kendros; 26.11.2010