Languages

Jak wyrównać 2 tagi div do lewej i prawej bez użycia float?

13 points
Asked by:
Kate_C
2901

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
Answered by:
Kate_C
2901

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
Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.