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

Question

Можно ли каким-то образом заставить всплывающий 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 начал уменьшаться, когда окно браузера сокращалось, вместо того, чтобы сначала перетаскивать его, а затем уменьшать при дальнейшем изменении размера окна.

Answer 1

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

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

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

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

Answer 2

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