Как не допустить расширения DIV, чтобы он занимал всю доступную ширину?

Question

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

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

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

.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>

Answer 1

Способ вправо заключается в использовании:

.pictureframe {
    display: inline-block;
}

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

Answer 2

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

Answer 3

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

Answer 4

Да display:inline-block твой друг. Также взгляните на: display:-moz-inline-block и display:-moz-inline-box.

Answer 5

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

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

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

Вот изображение кадра CSS для этого примера:

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

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