Вопрос:

Уменьшить, чтобы подогнать div и абзац на основе изображения?

html css

3963 просмотра

5 ответа

1527 Репутация автора

Код ниже является упрощенной версией моего сайта. На моем сайте ширина изображения варьируется от страницы к странице, и текст составляет около 100 слов. Это означает, что абзац растягивает DIV, чтобы быть шире, чем изображение. Используя только CSS, можно ли уменьшить DIV и абзац до ширины изображения?

JSFiddle здесь

Пример того, что я пытаюсь описать здесь . Верх - это то, что я получаю, низ - это то, чего я хочу.

HTML

<div>
    <img src="image.jpg" />
    <p>Lorem ipsum dolor sit amet.</p>
</div>

CSS

div {
   display: inline-block;
   }
Автор: colindunn Источник Размещён: 30.03.2012 10:46

Ответы (5)


0 плюса

5054 Репутация автора

Нет, это невозможно только с помощью CSS. Вам нужно будет установить ширину родительского div и изменить масштаб ваших изображений.

Автор: Juan Sosa Размещён: 30.03.2012 11:09

0 плюса

305 Репутация автора

Я рекомендую добавить немного jquery ... чтобы сделать вашу жизнь намного проще:

imgw = $("img").width();
$("div").css("width", imgw);

Вот как это будет выглядеть: http://jsfiddle.net/WM6hK/2/

Таким образом, вы можете добавить эту простую строку кода в любой div и просто заменить $ ("div") на и ID $ ("# idofdiv"). Надеюсь это поможет!

Автор: lov2code Размещён: 31.03.2012 04:37

3 плюса

3526 Репутация автора

Решение

И за все, что связано с таблицей, я навсегда постыдюсь: http://jsfiddle.net/WM6hK/3/

div {
display: table;
border: 1px solid red;
width: 1%;
}

p {
border: 1px solid blue;
}​
Автор: mikevoermans Размещён: 31.03.2012 04:57

0 плюса

61364 Репутация автора

Сейчас это невозможно, используя CSS

Используя jQuery, это так просто

$("div").width($("div img").width());

демонстрация

Автор: Starx Размещён: 31.03.2012 05:05

1 плюс

6730 Репутация автора

Вы можете использовать это: -

    div {
    width:20%;
    display:inline-table;
    }


p {
    border: 1px solid blue;
    }

Это будет полностью работать в соответствии с размером изображения .....

посмотрите демо: - http://jsfiddle.net/WM6hK/11/

Автор: Shailender Arora Размещён: 31.03.2012 07:42
Вопросы из категории :
32x32