2012-07-04 5 views
3

У меня есть три divs, и я даю им абсолютное позиционирование. Однако они не остаются внутри моего контейнера div.Мой div не остается внутри моего контейнера div

Вот код:

<body > 
    <div id="container"> 
     <div id="col1"> testing one</div> 
     <div id="col2"> testing two</div> 
     <div id="col3"> testing three</div> 
     <br/><p/>ksjdlfkjsldkjfl;s 

Вот CSS для трех моих дивы и мой контейнер:

div#container { 
    position:reletive; 
    border-spacing: 10px; 
    margin: 100px 80px auto; 
    padding: 0 100px10px; 
    background-color: #EEEEEE; 
    width: 800px; 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px; 
    border: 1px solid; 
} 

div#col1{ 
    position:absolute; 
    float: left; 
    left:0; 
    width:220px; 
    background-color :red; 
} 

div#col2{ 
    position:absolute; 
    float: left; 
    left:220px; 
    width:220px; 
    background-color :yellow; 
    padding: 10px auto ; 
} 

div#col3{ 
    position:absolute; 
    float: left; 
    left:500px; 
    width:100px; 
    background-color :green; 
    padding: 10px auto; 
} 
+0

div # container.position имеет орфографическую ошибку. позиция: reletive; к позиции: относительная; – justderb

+0

Большое спасибо –

ответ

4

Я думаю, что, во-первых, положение контейнера DIV должен быть «относительной» , а не «повторение». Во-вторых, я думаю, вы должны использовать «относительную» позицию вместо «абсолютного».

+0

В чем разница между абсолютным и относительным? –

+0

http://www.w3schools.com/cssref/pr_class_position.asp – justderb

+0

Большое спасибо –

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