Как мне расширить DIV для расширения всей доступной ширины?

В следующем HTML я хотел бы, чтобы рамка вокруг изображения была плотной - не растягивать и не использовать всю доступную ширину в родительском контейнере. Я знаю, что есть несколько способов сделать это (в том числе такие ужасные вещи, как ручная настройка его ширины на определенное количество пикселей), но каков правильный путь?

Изменить:. Один из ответов предполагает, что я отключу "display: block" - но это приводит к тому, что рендеринг выглядит искаженным в каждом браузере, в котором я его тестировал. Есть ли способ получить красивый рендеринг с отключением "display: block"?

Изменить: Если я добавлю "float: left" в рамку рисунка и "очистить: оба" к тегу P, он выглядит великолепно. Но я не всегда хочу, чтобы эти кадры плавали слева. Есть ли более прямой способ выполнить то, что делает "float"?

.pictureframe {
  display: block;
  margin: 5px;
  padding: 5px;
  border: solid brown 2px;
  background-color: #ffeecc;
}
#foo {
  border: solid blue 2px;
  float: left;
}
img {
  display: block;
}

<div id="foo">
  <span class="pictureframe">
       <img alt=''
        src="http://stackoverflow.com/favicon.ico" />
  </span>
  <p>
    Why is the beige rectangle so wide?
  </p>
</div>

Ответ 1

Правильный способ:

.pictureframe {
    display: inline-block;
}

Изменить: Плавающий элемент также производит тот же эффект, потому что плавающие элементы используют тот же shrink-to-fit для определения ширины.

Ответ 2

Бежевый прямоугольник настолько широк, что у вас есть отображение: блок на пролете, превращая встроенный элемент в элемент блока. Элемент блока должен занимать всю доступную ширину, а встроенный элемент - нет. Попробуйте удалить дисплей: блок из css.

Ответ 3

Добавление "float: left" в селектор span.pictureFrame устраняет проблему как то, что делает "float: left" :). Помимо всего остального, плавающий элемент слева, он занимает только пространство, необходимое для его содержимого, Любые последующие элементы блока (например, "p" ) будут перемещаться вокруг "плавающего" элемента. Если вы "очистите" поплавок "p", он будет следовать за нормальным документооборотом, таким образом, ниже span.pictureFrame. На самом деле вам нужно "clear: left", поскольку элемент был "float: left" -ed. Для более формального объяснения вы можете проверить спецификацию CSS, хотя она не подходит большинству людей.

Ответ 4

Да display:inline-block - ваш друг. Также посмотрите: display:-moz-inline-block и display:-moz-inline-box.

Ответ 5

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

$(window).load(function(){
  $('img').wrap('<div class="pictureFrame"></div>');
  $('div.pictureFrame').each(function(i) {
    $(this).width($('*:first', this).width());
  });
});

Это будет работать, даже если вы заранее не знаете размеры изображения, потому что он ждет загрузки изображений (обратите внимание, что мы используем $(window).load, а не более общий $(document).ready ) перед добавлением рамки изображения. Это немного уродливо, но оно работает.

Вот пример рисунка CSS для этого примера:

.pictureFrame {
  background-color:#FFFFFF;
  border:1px solid #CCCCCC;
  line-height:0;
  padding:5px;
}

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