Сделать абзац той же ширины, что и изображение

Я пытаюсь сделать тег p такой же ширины, как и изображение.Сделать абзац той же ширины, что и изображение

<a class="preview-holder" href="#" target="_blank"> 
    <div class='preview'> 
    <img src="http://s31.postimg.org/9c62tqc63/Carpet_Tree_of_Life.jpg" alt="" /> 
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra</p> 
    </div> 
</a>

https://jsfiddle.net/2hum47n0/2/

Я хорошо выглядит, если изображение шире, чем объем текста, но не иначе.

Мне не нужно использовать p, я могу использовать span или изменить разметку, если это необходимо.

Возможно ли это?

Обратите внимание, что предварительный просмотр не может иметь фиксированную ширину!

источник

2016-06-14 Toniq

проблема заключается в том, когда ширина растет, высота растет тоже, так что не существует простого решения для этого: https://jsfiddle.net/2hum47n0/3/ –

Посмотрите здесь: HTTP: //stackoverflow.com/questions/5485341/css-div-width-depending-on-image-size-выше – acdhirr

Если вы не хотите просматривать фиксированную ширину, дайте w idth с% – Roysh

Положите несколько CSS на держателе предварительного просмотра:

.preview-holder { 
    display: block; 
    max-width: 1px; 
}

Demo fiddle

источник

2016-06-14 08:14:08

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

http://jsfiddle.net/n6DAu/2608/

$('.preview').width($('#img').width());

источник

2016-06-14 07:54:39

Обратите внимание, что предварительный просмотр не может иметь фиксированную ширину! – Toniq

обновленный ответ. –

.preview { 
 
    display: inline-block; 
 
    width: 40%; 
 
} 
 

 
.preview .image-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 100%; 
 
    height: 120px; 
 
    
 
} 
 

 
.preview .image { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
} 
 
.preview .text { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 100%; 
 
}

<a class="preview-holder" href="#" target="_blank"> 
 
    <div class='preview'> 
 
    <div class="image-wrapper"> 
 
     <div class="image" style="background-image: url(http://s31.postimg.org/9c62tqc63/Carpet_Tree_of_Life.jpg;"></div> 
 
    </div> 
 
    <div class="text"> 
 
     <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra</p> 
 
    </div> 
 
    </div> 
 
</a>

попробовать это и дайте мне знать, если будет никаких проблем. проверьте кросс-браузер и сообщите, есть ли какие-либо проблемы.

источник

2016-06-14 08:09:25 Lucian

Пусть попробовать этот

HTML

<a class="preview-holder" href="#" target="_blank"> 
    <div class='preview'> 
    <div class="inner"> 
    <img src="http://s31.postimg.org/9c62tqc63/Carpet_Tree_of_Life.jpg" alt="" /> 
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra</p> 
    </div> 
    </div> 
</a>

CSS

.preview { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    float: left; 
    margin-right: 30px; 
    margin-bottom: 30px; 
    background-color: #eee; 
    border: 1px solid #ccc; 
    width: 1%; 
    display:table; 
} 
.preview .inner {height: auto; overflow: hidden} 
.preview img { 
    display: block; 
} 

.preview p { 
    margin: 0; 
    padding: 15px 10px; 
    color: #333; 
} 

.preview-hover { 
    background-color: #FC5A5A; 
}

DEMO

Как это работает:
Вам необходимо иметь окружение div, имеющее минимальную ширину (1%), и отображать его как таблицу; то внутренний DIV (соответствующий «внутренний») должен иметь высоту авто и скрытый перелив, это необходимо «заставить» его растяжение ширины + высоту в Div в

источник

2016-06-14 08:11:58

'float: left' совершенно не нужно здесь. Избегайте плавать, чтобы сделать это –

@ MarcosPrereGude, что код OP (см. Его демо), я не уверен, что он делает с его сайтом, поэтому я не удаляю его –

Сделать абзац той же ширины, что и изображение

ответ

Смежные вопросы