Jak umieścić div wewnątrz innego div do pozycji absolutnej?
Na przykład chciałbym stworzyć szablon jak na poniższym obrazku.
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.
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)
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
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