Как получить текст 2 div для выравнивания по дну?

Я проектирую контактную страницу и хотел бы иметь 2 столбца, один с меткой (например, facebook, твиттер) и один с фактическими данными. Дело в том, что я хочу, чтобы две линии (имеющие текст разного размера) совпадали по нижнему краю.Как получить текст 2 div для выравнивания по дну?

Это, наверное, проще, если я покажу вам: http://goonbee.com/contact

На данный момент, этикетки и детали вертикально по центру. Как я могу заставить их выровнять по дну?

Мой CSS является:

#contactbox { 
    display: block; 
    margin-top: 25px; 
} 

#contactboxlabels { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 17px; 
    color: #c9c9c9; 
    line-height: 42px; 
    text-align: right; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

#contactboxdetails { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 35px; 
    color: #545454; 
    line-height: 42px; 
    text-align: left; 
    vertical-align: bottom; 
    float: left; 
    padding: 0; 
    margin: 0; 
    margin-left: 15px; 
}

Мой HTML:

<div id="contactbox"> 
    <div id="contactboxlabels"> 
     <span>email<br />twitter<br />facebook<br />phone</span> 
    </div> 

    <div id="contactboxdetails"> 
     <span><a href="mailto:[email protected]">[email protected]</a><br /><a href="http://twitter.com/goonbee">@goonbee</a><br /><a href="http://facebook.com/goonbee">facebook.com/goonbee</a><br /><a href="tel:+44000000">+44 000000</a></span> 
    </div> 

    <div style="clear:both"></div> 
</div>

источник

2010-10-04 lms

Во-первых, ваша разметка не очень семантический. Ключи принадлежат их значениям, они не являются независимым столбцом. Это было бы наиболее семантический, минимальная наценка:

<dl> 
    <dt>email</dt> <dd>[email protected]</dd> 
    <dt>twitter</dt> <dd>@goonbee</dd> 
    <dt>facebook</dt> <dd>facebook.com/goonbee</dd> 
    <dt>phone</dt> <dd>+44 7825 163256</dd> 
</dl>

Для укладки этого, единственным недостатком является то, что вам нужно, чтобы задать ширину вашей «колонки» dt явно для того, чтобы заставить их выстраиваться:

dl { font-family: Arial, Helvetica, sans-serif; } 

/* column layout */ 
dt { 
    float: left; 
    clear: left; 
    width: 4.25em; /* needs to be set for longest item */ 
    margin: 0 1em 0 0; 
} 

dd { 
    overflow: hidden; /* creates an implicit column from remaining space */ 
}

Вы можете настроить line-height на dt и добавить padding-top сохранить Высоты же и совпасть исходные условия:

/* typography */ 
dt { 
    font-size: 17px; 
    line-height: 29px; /* 42 - padding-top */ 
    padding-top: 13px; /* ceil((42 - font-size)/2) */ 
    color: #c9c9c9; 
    text-align: right; 
} 

dd { 
    font-size: 35px; 
    line-height: 42px; 
    color: #545454; 
    text-align: left; 
}

Кроме того, если вы не хотите устанавливать ширину левого столбца и выравнивать его по самому длинному элементу, например столбец таблицы, используйте таблицу! Это даст вам лучший контроль над vertical-align. Я не думаю, что таблица была бы неуместной здесь, особенно если вы пометили левый столбец как заголовки th.

источник

2010-10-04 07:09:28

Я не уверен, что список определений будет «самой смысловой» разметкой здесь - вы на самом деле не определяете, что такое Facebook или Twitter, не так ли? Это серия пар событий/значений, и это, люди, является таблицей. Как ни странно, таблицы позволяют выравнивать нижние уровни в ячейках. Может быть, высота зла произвольно использует таблицы для макета, но так же плохо избегать таблиц, когда они лучше всего представляют структуру данных, которую вы пытаетесь изобразить. –

Я склонен согласиться с тем, что я, вероятно, поеду с таблицей здесь, но шаблон заголовка-значения _is_, для которого предназначены списки определений. Да, вы _are_ определяете значение поиска для Facebook, Twitter и т. Д. Я бы не назвал это неправильным; это тоже смысловая семантика.(Кроме того, несколько элементов 'dd', таких как дополнительные адреса электронной почты под одним' dt', также были бы законными: это не относится к таблице, где вам нужно добавить столбец для второго значения или список внутри ячейки чтобы он был «семантическим».) –

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

Поместите каждую метку и значение в свой контейнер. вы получите 4 пары метки/значения.

предоставить контейнер position:relative;, а затем использовать position:absolute; как для обозначения, так и для стоимости. пока дно для обоих равно 0, тогда они должны быть выровнены вдоль нижнего края.

источник

2010-10-04 05:09:23

<div> 
    <div style="float: left; width: 75px; text-align: right; padding-right: 10px; padding-top:15px;">email</div> 
    <div><a href="mailto:[email protected]">[email protected]</a></div> 
</div>

или ...

<div> 
    <span style="vertical-align: bottom; padding-right: 10px;">email</span> 
    <a href="mailto:[email protected]">[email protected]</a> 
</div>

источник

2010-10-04 05:16:24 sdavids

Как получить текст 2 div для выравнивания по дну?

ответ

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