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

У меня есть 3 divs. Первый div находится вверху с относительным положением, а второй div находится внизу, а его положение является абсолютным. Существует также третий div, который я хочу, чтобы он был посередине. Я хочу, чтобы третий div был посередине, так что независимо от того, изменяю ли высоту своего браузера, я хочу, чтобы он был привязан к 20px padding, в зависимости от первого и второго.как выровнять div между позицией абсолютной и относительной

middle-box{ 
padding: 20px; 
} 

.top-box{ 
width: 265px; 
position: relative; 
margin: 0px auto; 
} 

.bottom-box{ 
width: 25%; 
padding: 12px 0 12px; 
position: absolute; 
bottom: 0px; 
min-width: 300px; 
}

источник

2013-03-27 TSkora

Я думаю, это было бы сложно, потому что положение: абсолютное; не оставляет свое исходное пространство на странице, так что вы не знаете, насколько он высок, но я уверен, что это возможно, удачи – iConnor

Что означает «приписанный с интервалом 20 пикселей»? – isherwood

Я хочу, чтобы средний div имел верхнюю и нижнюю границу поля 20px, в соответствии с двумя другими div. поэтому высота div не важна, но я хочу, чтобы у него было 20px-зазор между верхним и нижним div. – TSkora

Вариации по этому же вопросу были заданы десятками раз на SO. Тот факт, что вы хотите 20px margin, не имеет значения. Это общая структура, которая может быть сложной.

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

http://jsfiddle.net/Fd6f9/1

.top-box { 
    height: 60px; 
    position: relative; 
} 
.middle-box { 
    position: absolute; 
    top: 70px; 
    bottom: 80px; 
    left: 20px; 
    right: 20px; 
    margin: 20px 0; 
} 
.bottom-box { 
    height: 56px; 
    padding: 12px 0 12px; 
    position: absolute; 
    bottom: 0px; 
}

источник

2013-03-27 02:07:37 isherwood

Если вы хотите иметь свой нижний ящик «застрял» в нижнюю части окна браузера, вы будете иметь переменное пространство между вашей средней коробкой и нижней коробкой, в зависимости от того, сколько контента находится в среднем окне и размер окна браузера вашего зрителя. Если вам нужно согласованное расстояние между div, вам нужно удалить абсолютное позиционирование.

Кроме того, я настоятельно рекомендую изменить ваш css из классов на ids (. To #). Вы забыли маркер класса/идентификатора на среднем поле, что также может вызвать проблемы.

Имейте в виду, что прокладка будет влиять на внутреннюю часть вашего div, в то время как маржа будет влиять на внешний вид.

Этот код дает вам то, что вы ищете? (Я добавил фон цвета только для визуального, так что я мог видеть, что происходит с дивами.)

<style type="text/css"> 
#top-box { 
    width: 265px; 
    position: relative; 
    margin: 0px auto; 
    background-color: #DDD; 
} 
#middle-box{ 
    margin: 20px 0; 
    padding: 20px; 
    background-color: #AAA; 
} 
#bottom-box{ 
    width: 25%; 
    padding: 12px 0 12px; 
    bottom: 0px; 
    min-width: 300px; 
    background-color: #888; 
} 
</style> 
</head> 
<body> 
<div id="top-box">something in the top goes here</div> 
<div id="middle-box">something in the middle here.</div> 
<div id="bottom-box">something at the bottom.</div> 
</body>

Это трудно понять, что еще сказать вам, не зная, что вы собираетесь делать с этим дивой , Надеюсь это поможет!

источник

2013-03-27 02:08:21

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

ответ

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