Languages

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

13 points
Asked by:
Kate_C
20410

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 answer
14 points
Answered by:
Kate_C
20410

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
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join