Top community members
All Questions Ask Question

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ÔŁĄ ­čĺ╗

If you think sharing knowledge and helping other is valuable.

join our community - Click here

Jak wyrówna─ç 2 tagi div do lewej i prawej bez u┼╝ycia float?

1 answers
13 points

Zawsze u┼╝ywam float: left i float: right, aby rozwi─ůza─ç ten problem.
Czy istnieje spos├│b na rozwi─ůzanie tego w inny spos├│b?
M├│j kod:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
    <style>
        .div-left  { border: 2px solid grey; margin: 15px; padding: 15px; }
        .div-right { border: 2px solid grey; margin: 15px; padding: 15px; }
    </style>
</head>
<body>
    <div class="div-left" >Hello 1</div>
    <div class="div-right">Hello 2</div>
</body>
</html>

W wyniku tego kodu dostajemy 2 divy:

Jak mogę uzyskać div 1 na lewo i div 2 na prawo bez używania floatów / pływaków?

Przyk┼éad, co chc─Ö osi─ůgn─ů─ç:

Z g├│ry dzi─Öki za pomoc.

1 answers
14 points

Najlepszym rozwi─ůzaniem jest u┼╝ycie flex.

Umie┼Ť─ç te 2 div-y w innym div-ie i dodaj do tego zewn─Ötrznego div-a display flex i justify-content, tak jak poni┼╝ej:

<div style="display: flex; justify-content: space-between;">

Pe┼ény przyk┼éad rozi─ůzuj─ůcy problem przedstawiony w pytaniu:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
    <style>
        .div-left  { border: 2px solid grey; margin: 15px; padding: 15px; }
        .div-right { border: 2px solid grey; margin: 15px; padding: 15px; }
    </style>
</head>
<body>
    <div style="display: flex; justify-content: space-between;">
        <div class="div-left" >Hello 1</div>
        <div class="div-right">Hello 2</div>
    </div>
</body>
</html>

Je┼Ťli chcemy mie─ç szeroko┼Ť─ç tych obu div-├│w, jak na┬áprzyk┼éadzie w pytaniu, dodaj szeroko┼Ť─ç: 100% do obu div-├│w. Przyk┼éad kodu:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
    <style>
        .div-left  { border: 2px solid grey; margin: 15px; padding: 15px; width: 100%; }
        .div-right { border: 2px solid grey; margin: 15px; padding: 15px; width: 100%; }
    </style>
</head>
<body>
    <div style="display: flex; justify-content: space-between;">
        <div class="div-left" >Hello 1</div>
        <div class="div-right">Hello 2</div>
    </div>
</body>
</html>

Uwaga, obie klasy s─ů takie same, wi─Öc mo┼╝emy u┼╝y─ç tylko jednej z nich i usun─ů─ç drug─ů. Ale rozumiem, ┼╝e to tylko dla lepszego zobrazowania problemu.

0 comments Add comment

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ­čĹő
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more