Premiär! Fyndchans i SweClockers Månadens Drop
Forum Mjukvara Programmering och digitalt skapande Tråd

En fråga angående att lägga divs sida vid sida.

1
Skriv svar
Permalänk
Medlem
●

En fråga angående att lägga divs sida vid sida.

Hejsan!

Håller på att fixa en hemsida som jag skulle vilja ha lite hjälp med. Jag har en moder-div som är 1000px bred, sedan har jag fyra divar innanför den diven som jag vill lägga ut över hela moderdiven, från ena sidan, till den andra... Exempel: http://jsfiddle.net/nf2gg2yL/

På exemplet går den inte enda till höger, och det stör mig som fan. Jag orkar räkna ut det rent matematiskt om jag verkligen behöver, men är det någon som vet något enklare knep för att lösa detta? Har haft problemet förut, men alltid använt mig av andra lösningar..

Tack för er hjälp!

Visa signatur

Ta det med en nya salt :)

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av ljungqvist93:

Hejsan!

Håller på att fixa en hemsida som jag skulle vilja ha lite hjälp med. Jag har en moder-div som är 1000px bred, sedan har jag fyra divar innanför den diven som jag vill lägga ut över hela moderdiven, från ena sidan, till den andra... Exempel: http://jsfiddle.net/nf2gg2yL/

På exemplet går den inte enda till höger, och det stör mig som fan. Jag orkar räkna ut det rent matematiskt om jag verkligen behöver, men är det någon som vet något enklare knep för att lösa detta? Har haft problemet förut, men alltid använt mig av andra lösningar..

Tack för er hjälp!

Gå till inlägget

Måste bredden på klassen "post" vara 150 pixlar? Annars, sänk bredden på #mother, eller måste den vara på 1 000 pixlar?

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Airikr:

Måste bredden på klassen "post" vara 150 pixlar? Annars, sänk bredden på #mother, eller måste den vara på 1 000 pixlar?

Gå till inlägget

Bredden på mother behöver vara 1000px ja, .post behöver inte vara någon speciell width

Visa signatur

Ta det med en nya salt :)

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Att sätta `margin-left' istället för `margin-right' på klassen `post' gör så att det sista div-elementet nuddar högersidan.

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av ljungqvist93:

Bredden på mother behöver vara 1000px ja, .post behöver inte vara någon speciell width

Gå till inlägget

Dåså Varsågod; http://jsfiddle.net/nf2gg2yL/4/

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Airikr:

Dåså Varsågod; http://jsfiddle.net/nf2gg2yL/4/

Gå till inlägget

Tackar hjärtligast!

Visa signatur

Ta det med en nya salt :)

Redigera
Citera flera Citera
Permalänk
Legendarisk ★
●

@ljungqvist93: Beroende på hur uppdaterade dina besökare är så skulle du kunna lösa det med flexbox, det låter dig undvika både att räkna ut några storlekar eller använda extra element. Ytterligare ett alternativ är att sätta .post till 25% bredd, floata dessa och ha marginalerna på inre element, och fortfarande undvika fasta mått så att det blir lättare att uppdatera stylesheetet i framtiden.

Körbart exempel:
http://jsfiddle.net/ewwj6pww/

<!DOCTYPE HTML>
<html>
    <head>
        <title>Flexbox</title>
        <style type="text/css">
        html,
        body
        {
            height: 100%;
            margin: 0;
        }
        
        .mother
        {
            display: flex;
            height: 100%;
        }
        
        .post
        {
            flex-grow: 1;
            margin-left: 0.5em;
            height: 100%;
            background: grey;
        }
            .post:first-child
            {
                margin-left: 0;
            }
        </style>
    </head>
    <body>
        <div class="mother">
            <div class="post"></div>
            <div class="post"></div>
            <div class="post"></div>
            <div class="post"></div>
        </div>
    </body>
</html>
Flexbox
Körbart exempel:
http://jsfiddle.net/8c9enj8d/

<!DOCTYPE HTML>
<html>
    <head>
        <title>Floats</title>
        <style type="text/css">
        html,
        body
        {
            height: 100%;
            margin: 0;
        }
        
        .mother
        {
            height: 100%;
            
            /*
            * Snabbt hack för att alla spalter ska få samma bredd.
            * Alternativ: Nolla marginalen på första / sista .post eller nästla vidare.
            */
            margin-left: -0.5em;
        }
        
        .post
        {
            width: 25%;
            float: left;
            height: 100%;
        }
            .post > div
            {
                margin-left: 0.5em;
                background: grey;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="mother">
            <div class="post"><div></div></div>
            <div class="post"><div></div></div>
            <div class="post"><div></div></div>
            <div class="post"><div></div></div>
        </div>
    </body>
</html>
Floats
Senast redigerat
Visa signatur

Abstractions all the way down.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara