Hej,
Går det på ngt sätt att aligna allt innehåll i en div till bottom? vertical-align: bottom & vertical-align: text-bottom funkar ju inte...
Finns det lösning?
Mhv
Richard
align innehåll i div till bottom ?
9 svar · 971 visningar · startad av Riri
Du kan ju mixtra med "padding"
Ex. padding-top: 22px;
Ja, om jag vet exakt hur høg div kommer att vara, men annars! Kom igen nu folkens, hur løser ni det annars?
En metod som funkar men som kräver en hyffsat modern browser är att ha två nästlade objekt och sätta
display: table
på den yttre och
display:table-cell; vertical-align:bottom
på den inre.
Hmmm... kul idé, men jag får det banne mig inte att funka:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="display:table;height:350px;border:2px solid pink">
<div style="display:table-cell;vertical-align:bottom;height:100%;border:1px solid brown;">
ighiggogg
<br />
lskfjgkljaslø
<img src="girl-1.jpg" />
</div>
</div>
</body>
</html>
Gør jag ngt fel?
Du gör helt rätt, testade din kod och det funkar perfekt i Mozilla 1.2.1.
Opera 6 klarar det halvt, texten hamnar längst ner som den ska, men färgerna på kantlinjerna återges felaktigt.
Däremot så klarar inte Internet Explorer det, kör med 6.0sp1 :(
Får väl hoppas att dom fixar till det i 7:an....
Men kör gärna på din kod, alltid bra att pusha på utvecklingen lite :)
Mvh Lukas
Då får det blir tabeller dær då.... skit också...
Nja, om IE's märkliga hantering av CSS inte stör allt för mycket för besökarna så tycker jag du ska använda CSS.
Är typ samma princip som när det gäller spelutveckling: att alla grafiska finesser inte återges korrekt på sämre grafikkort är något man får ta :)
Fast det beror ju också mycket på layouten, har man en layout som skär sig om webbläsaren återger vertikal position felaktigt så bör man nog inte använda min lösning.
Ge inte upp ännu! Så här skulle du kunna göra:
<div id="main" style="width:200px; height:100px; text-align:center; background:blue">
<div id="inner" style="height:20px; position:relative; background:gray; top:80%;">
FOO
</div>
</div>
Notera värdet för "top". 100 - (height[inner] / height[main]) %
I Mozilla och Opera 7 får du lägga på en procent för att elementet skall hamna längst ned. Du får mixtra lite grand.
:)
Nu kom jag på en lösning som funkar i MSIE 6(borde funka i 5.x oxå) och givetvis i Mozilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="position:relative; left: 0px; top: 0px; width: 320px; height: 200px; border: 1px blue solid">
Text längst upp till höger som vanligt...
<div style="position:absolute; bottom: 0px; left: 60px; width: 200px; border: 1px red dotted; text-align: center">
Centrerad text längst ner
</div>
</div>
</body>
</html>
position:relative på den yttre boxen är nödvändigt för att den inre boxen inte ska positioneras absolut i förhållande till fönstret.