Absolute: нижний не работает

У меня есть код css. почему "bottom: 0" не работает, когда "позиция: относительная"; если я откажусь от "позиции: относительная"; к "нижней" работе, но "float: left" и "float: right" не в "width: 930px;". извините, мой плохой английский

<style type="text/css">
#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
}

#right {
 position:absolute;
 right:0;
}

#bottom {
    position: absolute;
    bottom:0;
}
</style>

<div id="main">
    <div id="left">
        Left
    </div>
    <div id="right">
        Right
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

Ответы

Ответ 1

Это потому, что, когда вы устанавливаете position:relative на main, тогда position:absolute будет относиться к родительскому. И ваш div #main не имеет высоты, что приводит к тому, что #bottom не находится внизу страницы.

Ответ 2

Это не путь, используйте float для такого типа макета.

Возвращаясь к вашему вопросу,

bottom:0 работает нормально, но поскольку ваш основной не имеет высоты, вы его не видите,

Сделайте это для #main,

    #main
    {
        position: relative;
        width: 930px;
        padding:10px;
        margin:0 auto; 
        height:200px;
    }

Изменить:

Вы можете использовать

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
    top:0;
}

#right {
 position:absolute;
 right:0;
 top:0;
}

#bottom {
    left:0;
    position: absolute;
    bottom:-20px;
}

но я не рекомендую это (ранее я сказал, что этот макет не должен обрабатываться float) absolute не учитывает position других элементов, поэтому этот код будет разбит, если #left имеет большую высоту.

Если бы я был вами, я бы использовал это,

#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    float:left;
}

#right {
  float:right;
}

#bottom {
    clear:both;
}