CSS: Выровнять изображение правой нижней части div, заполненной текстом

Question

Я делаю себе сайт, но я немного застрял в проблеме, которую у меня есть.

Внутри div У меня есть блок текста с переменной высотой. В правой части текста я хочу разместить ширину изображения переменной ширины & высота. Он должен быть выровнен к нижней части . Над изображением может не быть никакого текста.

Это должно быть так: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg

Вот код, я в настоящее время имея:

HTML:

<div id="section"> 
    <div id="image"> 
     <img src="example.jpg" alt="image"/> 
    </div> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci. 
    Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt. 
    </p> 
</div> 

CSS

#section { 
    position: relative; 
} 
#image { 
    float: right; 
    margin-left: 20px; 
    position: absolute; 
    bottom: o; 
    right: 0; 
} 

С помощью этого кода изображение выровнено в нижнем правом углу div, но высота di v ниже, чем высота изображения. Также текст проходит через изображение.

Answer 1

вам нужно несколько вещей, чтобы исправить это.

1) добавьте прокладку справа, чтобы она не пересекалась с изображением.

#section { 
    position: relative; 
    padding-right:<at least image width so the text doesn't overlap> 
} 

2) при добавлении DIV и плавать в нем, поплавок удалить изображение из потока документа, так что вам нужно добавить еще один внутренний DIV с той же высоте или сделать высоту DIV такой же высоты, как ваш образ или просто добавить поплавок DIV ..

<div id="image"> 
    <img src="example.jpg" alt="image"/> 
    </div> 
    <div style="clear:both"></div> 
</div> 

Вот рабочий раствор: http://jsfiddle.net/zV3wm/

Answer 2

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

Суть в том, что вы спрятали скрытую версию изображения, а затем используете переполнение: скрытое, чтобы абзац против поплавка не текла под ним. Затем мы используем абсолютное позиционирование для размещения не скрытой версии изображения в нижней части контейнера.

Я подготовил макет в http://jsfiddle.net/UmGNZ/ (я дал частичную прозрачность скрытого изображения, так что вы можете увидеть, где он добавляется к документу), но для примера псевдо-HTML:

<container with position:relative> 
    <right-float> 
     <hidden img tag with opacity: 0 /> 
     <actual img tag with absolute positioning, bottom: 0, right: 0 /> 
    </right-float> 
    <p with overflow:hidden (or auto) /> 
</container> 

You также может попробовать чистое CSS-решение с использованием CSS-таблиц, если вам не нужно поддерживать IE7, но в противном случае это должно сработать до IE6, если вы используете видимость: скрыты в сторону непрозрачности и добавьте масштаб: 1 в стиль абзаца.

Answer 3

Эта идея, которая позволяет гибко размер изображения: http://jsfiddle.net/David_Knowles/F3zZU/4/

.cell {display:table-cell;} 

#section { 
    position: relative; 
    width:300px; 
} 
#image { 
    vertical-align: bottom; 
} 

<div id="section"> 
    <div class="cell"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p> 
    </div> 
    <div id="image" class="cell"> 
     <img src="http://placeimg.com/120/80/any" alt="image"/> 
    </div> 
</div> 

Answer 4

Я не вещь, я правильно, но вы можете добиться того, что с помощью поплавкового правой и маржинальной-топ.

#img { 
    float: right; 
    margin-top: -140px; 
} 

Проверьте это: http://jsfiddle.net/wrujx/

Answer 5

Я думаю, что лучшим решением является использование немного JQuery (JavaScript), и пусть каждая часть делать свою работу по поддержанию его как можно более простым. Вот что вы должны были бы:

HTML

<div id="wrapper"> 

    <p>yourtexthere</p> 
    <img src="whatever.jpg"/> 

</div> 

CSS

#wrapper{ 

    width:600px; 
    border:1px solid #000000; 

} 

p{ 

    display:inline-block; 
    margin-right:20px; 

} 

img{ 

    vertical-align:bottom; 

} 

JQuery

var parentWidth = $('#wrapper').width() 
var imgWidth = $('img').width() 
$('p').width((parentWidth - imgWidth) - 20) 

И there you go простой и простой без лишних тегов и беспорядочного позиционирования.