footer using inested divs

Question

Я пытаюсь добавить нижний колонтитул на свой сайт, но текст продолжает перемещаться.

<div id="footer"> 
    <div id="footerchild"> 
    <a href=".html">1</a> 
    </div> 
    <div id="footerchildone"> 
    <a href=".html">2</a> 
    </div> 
    <div id="footerchildtwo"> 
    <a href=".html">3</a> 
    </div> 
    <div id="footerchildthree"> 
    <a href=".html">4</a> 
    </div> 
</div> 

и CSS

#footer { 
    margin-left: 100px; 
    background: #812; 
    box-shadow: 1px 2px 40px 1px #444; 
    border: 1px solid black; 
    width: 1040px; 
    height: 300px; 
    position: absolute; 
} 

#footerchildone { 
    float: right; 
    margin-right: 500px; 
    margin-top: -22px; 
} 

#footerchildtwo { 
    float: right; 
    margin-right: 350px; 
    margin-top: -22px; 
} 

#footerchildthree { 
    float:right; 
    margin-top: -22px; 
    margin-right: -250px; 
} 

Я хочу, чтобы каждый столбец будет centrated с определенным расстоянием, но когда я двигаться, например childthree, то второй ребенок следует с ним. Это не должно быть так, потому что я дал каждому из них отдельный div. В чем проблема?

Answer 1

Я думаю, что у пытаются достичь этого:

http://jsfiddle.net/65GaS/5/

Это так просто, или я неправильно понял.

Answer 2

http://jsfiddle.net/vvjAJ/

HTML

<div id="footer"> 
<div id="footerchild"><a href=".html">1</a></div> 
<div id="footerchildone"><a href=".html">2</a></div> 
<div id="footerchildtwo"><a href=".html">3</a></div> 
<div id="footerchildthree"><a href=".html">4</a></div> 
</div> 

HTML

#footer 
{margin-left: 100px;background: #812;box-shadow: 1px 2px 40px 1px #444;border: 1px solid black;width: 1040px;height: 300px;position: absolute;} 
#footerchild{float:left;width:260px;margin-top: 50px;text-align:center;} 
#footerchildone{float: left;width:260px;text-align:center;margin-top: 50px} 
#footerchildtwo{float: left;width:260px;text-align:center;margin-top: 50px} 
#footerchildthree{float:left; margin-top: 50px;text-align:center;width:260px;} 

Answer 3

Ваш ребенок divs двигаться вместе, потому что вы дали им float: right;.

Этот код CSS:

#footerchildone{float: right; 
       margin-right: 500px; 
       margin-top: -22px} 

Означает, что footerchildone должны остаться 500 пикселей вправо от любых других вещей, прямо из него. Если вы хотите, чтобы ваши дивы оставались в точном положении, вы можете дать им абсолютные позиции. В этом случае не указать поля, но использовать top, left, fight, bottom, чтобы разместить дивы:

#footerchildone{position:absolute; 
       right: 500px; 
       top: -22px} 

#footerchildtwo{position:absolute; 
       right: 350px; 
       top: -22px} 

#footerchildthree{position:absolute; 
        top: -22px; 
        right: -250px} 

Вы можете добавить text-align:center центрировать текст Кроме того, вы будете (если это то, что вы имеете в виду centrated колонки.) вероятно, необходимо указать width и height каждого элемента при использовании position:absolute.

Наконец, использование отрицательных значений для полей или позиционирование div кажется немного беспорядочным.

Answer 4

Вам нужно добавить text-align: center для центровки текста для родительского div и сделать каждый дочерний div как position: relative; Дисплей: встроенный блок; автоматически он выровняет центр для родительского div и обязательно удалит float: справа для дочерних div. надеюсь, что это сработает для вас.