Jak wyrównać 2 tagi div do lewej i prawej bez użycia float?
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.
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.