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

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

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

Редактировать: Если я добавлюплыть налево" на фоторамку и "ясно: как» к тегу 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;
}

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

Ответы на вопрос(5)

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

Решение Вопроса

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

.

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

 raldi25 сент. 2008 г., 01:39
Ужасно, но из тех ответов, которые действительно работают, это кажется мне наименее хакерским.

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

 raldi24 сент. 2008 г., 22:24
Если я это сделаю, то изображение нене сидите внутри фрейма - вы действительно пробовали это, и выглядит ли это хорошо в вашем браузере?

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

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

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

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

Ваш ответ на вопрос