При использовании позиции: абсолютное, как мне определить, что я хочу, чтобы нижний край одного элемента был выровнен поHtml

Программисты Html
Ответить
Anonymous
 При использовании позиции: абсолютное, как мне определить, что я хочу, чтобы нижний край одного элемента был выровнен по

Сообщение Anonymous »

У меня есть столбец текста с широкими полями с обеих сторон. Под ним у меня есть полноразмерный раздел данных (в табличном формате).

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

Простым решением будет позиция:absolute, а top:foopx будет сдвигать его вверх относительно остальной части элемента div. Единственная проблема в том, что высота вкладки является динамической. Мне нужно как-то to top:'height'px, но (очевидно) CSS не содержит ничего для динамических значений.

Что мне нужно сделать, так это выровнять нижний край 'tab' по top краю содержащего div, и я не могу хоть убей найти какой-либо оператор CSS, который бы это делал. Я бы предпочел избегать подхода, основанного на JavaScript (например, во время выполнения получить высоту вкладки, а затем установить верхнюю часть, равную этой высоте), потому что весь нижний элемент div время от времени обновляется с помощью вызова AJAX, а регулировка высоты в этом процессе приводит к «дрожанию» страницы при обновлении (не знаю, почему этого не происходит без обновления высоты; дрожание находится в отдельном разделе кода).

Запрошенный код пример:




#smallColumn
{
float:left;
width:100px;
height:100px;
background:#000;
margin:5px;
}
#fullColumn
{
float:left;
width:200px;
height:300px;
background:#000;
margin:5px;
}
#bottomDiv
{
position:relative;
}
#tab
{
position:absolute;
top:-40px;
}




a
b

Tab

DATA DATA DATA





Подробнее здесь: https://stackoverflow.com/questions/781 ... dge-of-one
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»