Сделайте текст в div ниже изображения возьмитесь по ширине изображения

Итак, я пытаюсь получить текст под изображением, чтобы он не расширялся, чем изображение. Я не могу это понять.Сделайте текст в div ниже изображения возьмитесь по ширине изображения

Было бы легко, если родительский div имел фиксированную ширину, но ширина родительского элемента и изображения внутри были переменными на основе ширины изображения.

У меня сейчас это как родной брат, но, возможно, это ребенок на изображении div - это решение.

Вот jsfiddle: http://jsfiddle.net/z6f15coy/1/

 <div class='parent'> 
     <div class="child_1"> 
      <img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg" > 
     </div> 
     <div class="child_2"> 
      Some text that is wider than the image goes here... Lorem ipsum whatever. 
     </div> 
    </div>

Искреннее спасибо за любую помощь. Это очень ценно.

источник

2015-07-28 ambe5960

это невозможно, если не использовать JavaScript для определения ширины IMG ... блок по умолчанию расходуется настолько широко, насколько это необходимо, если не применяется ширина. lement будет расходовать контейнер, если родительская ширина не объявлена. – Andrew

+ Оставлять изображения без ширины и высоты на странице - это не очень хорошая идея, так как это может помешать компоновке страницы. Если вам все еще нужно это сделать, то JavaScript является единственным вариантом, так как наша страница может только знать размеры img после его загрузки, а затем динамически он может шить ширину child2 div в соответствии с этим –

второй мыслью, если ваш абзац имеют фиксированную высоту, тогда это может быть достигнуто, как это http://jsfiddle.net/z6f15coy/3/. position absolute на вашем child2 всегда будет шириной вашего контейнера, и поскольку ваш контейнер является шириной вашего img, ваш абзац также будет применять ширину ширины изображения. Однако, поскольку его положение абсолютное, это означает, что оно вышло из потока, тем самым делая контейнер не считая child2 как дочерний элемент. вам нужно будет установить нижнюю часть на вашем контейнере, чтобы расходовать столько же, сколько ваш пункт – Andrew

Вы можете передать на поведение отображения таблицы:

.parent { 
 
    border: 1px solid #c4c4c4; 
 
    padding:5px; 
 
    margin:5px; 
 
    display:table; 
 
    width:1px;/* will extand to fit longest content (image or a very long word) */ 
 
}

<div class='parent' style=""> 
 
    <div class="child_1"> 
 
     <img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg"> 
 
    </div> 
 
    <div class="child_2">Some text that is wider than the image goes here... Lorem ipsum whatever.</div> 
 
</div>

источник

2015-07-28 19:51:59

ничего себе, потрясающе! Спасибо. – ambe5960

Определите ширину для этого div?

try this if i got you.

http://jsfiddle.net/z6f15coy/2/

источник

2015-07-28 19:33:25

Да, спасибо. Я хотел, чтобы он соответствовал ширине изображения независимо от размера изображения, но я думаю, что это можно сделать только через javascript. – ambe5960

Сделайте текст в div ниже изображения возьмитесь по ширине изображения

ответ

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