Автоматическое распределение блоков HTML

Question

есть такой вопрос. Верстаю сайт, добавил родительский блок и последовательные, но они идут сверху вниз, а мне нужно, чтобы они распределялись равномерно по всему родительскому блоку.

Листинг самой страницы:

<?php
    include "../script/func/function.php";
    check_coock();
    $exit = '<a href="../script/kill_coock.php">Выход</a>';
    $index = '<a href="../pages/index.php">Главная</a>';
    $admin_hr = '<hr class="admin_hr">';
?>

<!DOCTYPE html>
<html lang="rus">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://amt.rosminzdrav.ru/theme/image.php/adaptable/theme/1605257379/favicon">
    <link rel="stylesheet" href="../css/style-main.css">
    <link rel="stylesheet" href="../css/style-admin.css">
    <title>Администрирование</title>
</head>
<body>
    <div class="up">
         <text class="goto_exit">?</text>
         <div class="exit_div">
          <?php
             echo $exit;             
             echo $admin_hr;             
             echo $index;
          ?> 
         </div>
         <img src="../images/index/f1.png" alt="" class="user_img" >
         <text class="up_text">
             <?php
                 echo $_COOKIE["name"];
                 echo " ";
                 echo $_COOKIE["surname"];
             ?>
         </text>
     </div>
    <header> 
            <text>Администрирование</text>
    </header>
    <div class="admin_panel">
        <div class="add_user">
            <form action="#">
                <input type="file" name="uploadfile">
                <input type="submit" value="Загрузить">
            </form>
        </div>
        <div class="add_admin"></div>
        <div class="delete_admin"></div>
        <div class="delete_user"></div>
    </div>
    <footer></footer>
</body>
</html>

Листинг CSS файла:

@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic);
body {
    color: #2F4F4F;
    /* font-family: 'Audiowide', sans-serif; */
    font-family: Open Sans, sans-serif;
    font-weight: 400!important;
}

.admin_panel {
    width: 55%;
    min-width: 350px;
    height: auto;
    border-style: none;
    border: 1px solid grey;
    border-radius: 10px;
    margin: 59px 0px 50px 22%;
}

.add_user {
    width: 300px;
    height: 200px;
    border-style: none;
    border: 1px solid grey;
    border-radius: 10px;
    margin: 20px 0px 0px 20px;
}

.add_admin {
    width: 300px;
    height: 200px;
    border-style: none;
    border: 1px solid grey;
    border-radius: 10px;
    margin: 20px 0px 0px 20px;
}

.delete_admin {
    width: 300px;
    height: 200px;
    border-style: none;
    border: 1px solid grey;
    border-radius: 10px;
    margin: 20px 0px 0px 20px;
}

.delete_user {
    width: 300px;
    height: 200px;
    border-style: none;
    border: 1px solid grey;
    border-radius: 10px;
    margin: 20px 0px 0px 20px;
}

Answer 1

Родиелю в CSS добавь

display:flex;

Если нужно чтобы были в центре то

display:flex;
justify-content:center;

Answer 2

вам нужно в css задать вашему родительскому блоку display: inline-flex или же просто flex. Надеюсь это вам поможет).

БЛОГ НА HUSL

Автоматическое распределение блоков HTML

Ответы (2 шт):