Jak umieścić div wewnątrz innego div do pozycji absolutnej?

Na przykład chciałbym stworzyć szablon jak na poniższym obrazku.

http://i.imgur.com/OneRsMw.png

Jak ustawić każdy div wewnątrz kontenera do jego absolutnej pozycji? Wolałbym nie używać float-atrybutów. Wszelkie krótkie przykłady będą mile widziane.

Author: Gabriele Petrioli, 2013-02-25

2 answers

Możesz użyć pozycjonowania absolute i relative.

Na przykład

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;}

Demo na http://jsfiddle.net/gaby/MB4Fd/1/

(oczywiście możesz dostosować rzeczywiste pozycjonowanie do swoich preferencji, zmieniając wartości top/left/right / bottom)

 32
Author: Gabriele Petrioli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-25 14:06:19

Użyj position: relative; Na pojemniku (a <div> zawierającym całą zawartość) i absolutnie umieść elementy potomne. Elementy potomne wewnątrz pojemnika zostaną umieszczone względem pojemnika, dzięki czemu można łatwo rozłożyć wszystko do własnych potrzeb.

jednak , uważa się za złą praktykę używanie pozycjonowania w większości sytuacji do układania witryny .. Sugerowałbym użycie pływaków, mimo że twierdzisz, że nie chcesz, będziesz miał o wiele większą spójność w całym różne przeglądarki.

Przeczytaj Ten artykuł jeśli jesteś zdezorientowany o pływakach

 5
Author: Adrift,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-05 01:58:55