Как поместить div внутри другого div в абсолютное положение?

Например, я хотел бы создать шаблон, как на изображении ниже.

Как вы помещаете каждый div внутри контейнера в его абсолютное положение? Я бы предпочел без использования атрибутов float. Любые короткие примеры будут оценены.

Ответ 1

Вы можете использовать позиционирование absolute и relative.

например

HTML

<div id="container" class="box">
    <div class="box top left"></div>
    <div class="box top center"></div>
    <div class="box top right"></div>

    <div class="box middle left"></div>
    <div class="box middle center"></div>
    <div class="box middle right"></div>

    <div class="box bottom left"></div>
    <div class="box bottom center"></div>
    <div class="box bottom right"></div>
</div>

CSS

#container{
    width:200px;
    height:200px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid red;
    position:absolute;
    width:20px;
    height:20px;    
}

.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}

.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}

Демо на http://jsfiddle.net/gaby/MB4Fd/1/

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

Ответ 2

Используйте position: relative; в контейнере (a <div>, содержащий все содержимое), и абсолютно поместите дочерние элементы. Детские элементы внутри контейнера будут располагаться относительно контейнера, поэтому было бы довольно легко отнести все к вашим потребностям.

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

Прочитайте эту статью, если вы запутались в поплавках