Как достичь Bottom Align с плавающей точкой div такого размера, как его контейнер - PullRequest
Новая
       4

Как достичь Bottom Align с плавающей точкой div такого размера, как его контейнер

3 голосов
/ 13 января 2011

Как мне добиться следующего макета?В частности, позиционирование Image и DIV

Я обнаружил, что если я не установлю конкретную ширину для Div, он просто перейдет к следующей строке и займет всю ширину контейнера.,Кроме того, выравнивание по отношению к нижней части изображения доставляет мне проблемы.В настоящее время они оба float:left

alt text

Редактировать: два решения до сих пор работают, если изображение имеет постоянную ширину, с которой, я думаю, я мог бы работать, но это происходит втема Wordpress для страницы профиля автора, и возможно, что изображения будут иметь слегка изменяемую ширину.Есть ли решение, которое бы располагало Div рядом с изображением (без отступов), независимо от того, насколько широко или узко изображение?В основном, используя div, отрегулируйте его ширину в соответствии с шириной изображения.

Ответы [ 2 ]

3 голосов
/ 13 января 2011

Протестировано в IE7 / 8, Firefox, Chrome.

Live Demo # 2

CSS: 

#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}

JS / jQuery: 

$('#header').css('margin-left', $('#top img').width() + 10);

(вы можете изменить + 10 для parseInt($('#top img').css('margin-right'), 10))

HTML: 

<div id="container">
    <div id="top">
        <img src="" />
        <div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
    </div>
    <div id="content">dfgdfg</div>
</div>
2 голосов
/ 13 января 2011

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

Я собрал быстрый образец здесь: http://jsfiddle.net/JjxYj/1/

Обратите внимание, что если вы удалите ширину Div в заголовке, он станет шириной его содержимого.

Обновление

Чтобы ответить на обновленную часть вопроса, вот еще одно решение, которое позволит изображению иметь любую ширину, в то же время располагая текст заголовка внизу содержащего его элемента: http://jsfiddle.net/JjxYj/5/

...