Как сделать так, чтобы DIV не расширялся и не занимал всю доступную ширину?
В следующем HTML-коде я бы хотел, чтобы рамка вокруг изображения была плотно прилегающей - не растягивалась и не занимала всю доступную ширину в родительском контейнере. Я знаю, что есть несколько способов сделать это (включая такие ужасные вещи, как установка ширины вручную на определенное количество пикселей), но каков способ Правильно?
Редактировать: Один из ответов предлагает мне отключить "display: block", но это приводит к тому, что рендеринг выглядит некорректным в каждом браузере, в котором я его тестировал. Есть ли способ получить красивый рендеринг с выключенным "display: block" ?
Редактировать: Если я добавлю "float: left" к кадру изображения и "clear: both" к тегу 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>
Ответы 5
Бежевый прямоугольник такой широкий, потому что у вас есть display: block в диапазоне, превращая встроенный элемент в элемент блока. Элемент блока должен занимать всю доступную ширину, а встроенный элемент - нет. Попробуйте удалить блок display: block из css.
Способ Правильно заключается в использовании:
.pictureframe {
display: inline-block;
}
Редактировать: Плавающий элемент также дает тот же эффект, потому что плавающие элементы используют тот же алгоритм Уменьшать до размеров для определения ширины.
Ужасно, но из ответов, которые пока действительно работают, мне кажется, что это наименее взломанный.
Единственный способ надежно создавать рамки для изображений в браузерах - это динамически устанавливать ширину. Вот пример использования 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.
да
display:inline-block - ваш друг.
Также посмотрите: display:-moz-inline-block и display:-moz-inline-box.
Добавление «float: left» в селектор span.pictureFrame решает проблему, как и «float: left» :) Помимо всего прочего, перемещение элемента слева заставит его занять только пространство, необходимое для его содержимого. Любые последующие элементы блока (например, «p») будут плавать вокруг «плавающего» элемента. Если вы «очистите» float от «p», он будет следовать обычному потоку документов, таким образом, он будет ниже span.pictureFrame. На самом деле вам нужно «clear: left», поскольку элемент был «float: left» -ed. Для более формального объяснения вы можете проверить спецификацию CSS, хотя это выходит за рамки понимания большинства людей.
Если я это сделаю, то изображение не будет помещено в рамку - вы на самом деле пробовали это, и хорошо ли это выглядит в вашем браузере?