WN - Positioner för floating div

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Positioner för floating div (https://www.wn.se/forum/showthread.php?t=1059476)

jonny

2013-10-15 10:34

Positioner för floating div

För att försöka förklara det jag vill åstadkomma. Jag har flera små divar i två kolumner. Jag har använt float:left för dessa.

Jag vill lägga in ett tomrum längst uppe till vänster så att den vänstra kolumnen hamnar en bit längre ner än den högra. Några förslag?

jonny

2013-10-15 10:49

1 bifogad(e) fil(er)

Bifogar bild för att illusterera. Det vänstra är det jag vill åstadkomma och det högra är som det blir...

gregoff

2013-10-15 10:54

Känns som att du måste använda två DIV'ar, en för resp. kolumn.

jonny

2013-10-15 11:22

Det är det jag vill komma ifrån. Jag vill ha en snygg lösning både presentationsmässigt och kodmässigt.

allstars

2013-10-15 11:58

float: left på alla, margin-top: n px på det första elementet i serien?

Jahopp, nej, det gick visst inte.

coredev

2013-10-15 14:19

Citat:

Ursprungligen postat av jonny (Inlägg 20479141)

Det är det jag vill komma ifrån. Jag vill ha en snygg lösning både presentationsmässigt och kodmässigt.

Ser inte att det skulle vara osnyggt att lägga en div runt varje kolumn. Tycker det kan låta rätt sårbart att köra utan det.

Vad har du för syfte att inte vilja dela in det i fasta kolumner, skall det t.ex. ommöbleras vid mindre skärmstorlek?

jonny

2013-10-15 14:45

Dels mobilanpassning och dels att det blir enklare och snyggare kod för att hämta och visa data, men jag kör nog på med två kolumner (en div per kolumn) till en början åtminstone.

ANttila

2013-10-15 17:23

HTML-kod:

<html>

<head>

        <style>

                body {

                        margin: 0;

                        padding: 0;

                        width: 1000px;

                }

                .box {

                        margin: 5%;

                        height: 200px;

                        width: 40%;

                        float: left;

                        display: block;

                        position: relative;

                }

                .box:nth-child(odd) div {

                        top: 75%;

                }

                .box div {

                        width: 100%;

                        height: 100%;

                        position: absolute;

                        background: blue;

                }

        </style>

</head>

<body>



        <div class="box">

                <div>

                        test

                </div>

        </div>

        <div class="box">

                <div>

                        test

                </div>

        </div>

        <div class="box">

                <div>

                        test

                </div>

        </div>

        <div class="box">

                <div>

                        test

                </div>

        </div>

        <div class="box">

                <div>

                        test

                </div>

        </div>

        <div class="box">

                <div>

                        test

                </div>

        </div>

        

</body>

</html>

Mitt fina hack av kod :)

Oscarip

2013-10-15 21:02

Kör en display:inline-block, font-size: 0 på parent och vertical-align: top samt margin-top på den du vill pusha ned?

Då slipper du köra wrapper runt varje kolumn eller rad.

coredev

2013-10-20 22:51

Citat:

Ursprungligen postat av Oscarip (Inlägg 20479201)

Kör en display:inline-block, font-size: 0 på parent och vertical-align: top samt margin-top på den du vill pusha ned?

Då slipper du köra wrapper runt varje kolumn eller rad.

Tänk bara på att detta ofukar med IE6 http://quirksmode.org/css/css2/display.html

rhdf	2013-10-21 03:06

@coredev: Ser du det som ett problem att något inte funkar i ie6?

Är det NÅGON som år 2013 seriöst sitter lägger tid på att få saker att funka i webbläsare som anses som döda? (förutsatt att det inte är ett specifikt krav från kund, vilket iaf jag skulle ta extra betalt för)

ANttila

2013-10-21 13:45

Citat:

Ursprungligen postat av rhdf (Inlägg 20479597)

Håll koll på dina besökare, på mina siter så är det under 0.5% som har IE 8 och tidigare. Så det är inte aktuellt att lägga ner den tiden på att fixa css.

rhdf	2013-10-21 17:40

Citat:

Ursprungligen postat av ANttila (Inlägg 20479641)

Håll koll på dina besökare, på mina siter så är det under 0.5% som har IE 8 och tidigare. Så det är inte aktuellt att lägga ner den tiden på att fixa css.

Det var lite det jag ville påpeka...

IE8 KAN vara vettigt att iaf se till så det viktiga saker funkar i men att ens lägga en sekund på att få nånting att funka i IE6 är bortkastad tid som jag hellre lägger på annat

coredev

2013-10-24 20:10

Citat:

Ursprungligen postat av rhdf (Inlägg 20479655)

Jag håller med dig att i många fall är IE6 helt orelevant men stöter faktiskt på det då och då att man tvingas ta hänsyn. Speciellt på vissa platser (t.ex. England verkar vara härligt konservativa) eller vissa företag (modell större) verkar vissa ha svårt för att att släppa taget om IE6. :) Så i min verklighet behöver man ha det i bakhuvudet, men självklart gäller detta inte för alla.

Alla tider är GMT +2. Klockan är nu 09:37.