Выровнять элемент HTML по основанию другого элемента HTML без абсолютных значений - PullRequest
Новая
       15

Выровнять элемент HTML по основанию другого элемента HTML без абсолютных значений

0 голосов
/ 30 мая 2011

У меня новая проблема. Мне нужно сделать вертикальное выравнивание в HTML-элементе по низу другого, но я могу использовать абсолютное значение, когда второй элемент может иметь разную высоту.

Взгляните на этот jsFiddle пожалуйста.

<a> нужно оставаться в нижней части <h1>, как здесь - в обход .

Я пытался vertical-align, но это не работает.

Как я могу это сделать? При необходимости я могу без проблем изменить структуру HTML.

Редактировать : извините, но я не думаю, что оставил что-то ясное: я не могу использовать margin-top или подобное, потому что font-size из H1 является переменной.

Bye.

Ответы [ 5 ]

2 голосов
/ 30 мая 2011

Вы можете сделать это без указания точного смещения px, например: http://jsfiddle.net/Tu7bA/14/

Соответствующий новый CSS: 

.header-container {
    overflow: hidden;
    position: relative
}
.header-container > ul {
    position: absolute;
    bottom: 0; right: 0
}
.header-container ul > li {
    float: right;
    text-decoration: none;
    color: #0A27D5;
    font-size: 8pt;
    margin-left: 16px;
}
.header-container > h1.first {
    float: left;
    font-size: 26pt;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

HTML: 

<div class="content-block">
    <div class="header-container">
        <h1 class="first">Lorem Ipsum</h1>
        <ul>
            <li><a href="./Edit">editar</a></li>
            <li><a href="./Attach">anexar</a></li>
        </ul>
    </div>
    <p>
        Lorem ipsum dolor sit amet..
    </p>
</div>
1 голос
/ 30 мая 2011

Вот исправленный код на JSFIDDLE

0 голосов
/ 30 мая 2011

возможно, это нормально jsfiddle . Надеюсь, это поможет

0 голосов
/ 30 мая 2011

vertical-align не работает, потому что он выравнивается только в своей области, которая ниже h1. Итак, вот: 

div.content-block > a {
float: right;
text-decoration: none;
color: #0A27D5;
font-size: 8pt;
margin-left: 16px;
}

Добавьте margin-top:<value>, чтобы немного опустить его, скажем, 

div.content-block > a {
float: right;
text-decoration: none;
color: #0A27D5;
font-size: 8pt;
margin-left: 16px;
margin-top: 15px;
}
0 голосов
/ 30 мая 2011

Вставьте элементы управления в элемент и работайте с этим, например, изменяя свойство margin-top.

...