WN - Positioner för floating div

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida

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

Alla tider är GMT +2. Klockan är nu 07:29.

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida