div网格宽度不排队

时间：2017-10-14 02:44:50

标签： html css

我正在尝试排列一个div网格，使其成为一个15分钟的gant图表，用于安排一天的任务。第一个div我都将宽度设置为200px，但为什么“Task”中的宽度更大呢？

<!doctype html>

<html lang="en">
<head>
    <style>
        .header { 
            display: inline-block;
            margin: 0px;
            background-color: gray;
            padding: 5px;
            border-style: solid;
            border-right: 1px;
            width: 50px;
        }
        .line-item{
            display: inline-block;
            background-color: cadetblue;
            width: 50px;
        }
    </style>
    <meta charset="utf-8">

    <title>Daily Planner</title>
</head>

<body>

    <div style="display: flex; margin: 0px;">
        <div style="display: inline-block; margin: 0px; padding: 5px; width: 200px; background-color: blue;"></div>
        <div class="header">8:00</div>
        <div class="header">8:15</div>
        <div class="header">8:30</div>
        <div class="header">8:45</div>
        <div class="header">9:00</div>
        <div class="header">9:15</div>
        <div class="header">9:30</div>
        <div class="header">9:45</div>
        <div class="header">10:00</div>
        <div class="header">10:15</div>
        <div class="header">10:30</div>
        <div class="header">10:45</div>
        <div class="header">11:00</div>
        <div class="header">11:15</div>
        <div class="header">11:30</div>
        <div class="header">11:45</div>
        <div class="header">12:00</div>
        <div class="header">12:15</div>
        <div class="header">12:30</div>
        <div class="header">12:45</div>
        <div class="header">1:00</div>
        <div class="header">1:15</div>
        <div class="header">1:30</div>
        <div class="header">1:45</div>
        <div class="header">2:00</div>
        <div class="header">2:15</div>
        <div class="header">2:30</div>
        <div class="header">2:45</div>
        <div class="header">3:00</div>
        <div class="header">3:15</div>
        <div class="header">3:30</div>
        <div class="header">3:45</div>
        <div class="header">4:00</div>
        <div class="header">4:15</div>
        <div class="header">4:30</div>
        <div class="header">4:45</div>
        <div class="header">5:00</div>
        <div class="header">5:15</div>
        <div class="header">5:30</div>
        <div class="header">5:45</div>
        <div class="header">6:00</div>
    </div>

    <div style="display: flex; margin: 0px;">
            <div style="display: inline-block; margin: 0px; padding: 5px; width: 200px; background-color: red;">Task 1</div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
        </div>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

您的容器设置为display: flex;，但您没有为孩子设置任何flex css 设置flex-shrink: 0;将确保它们始终为200px。

THIS可能是flexbox的最佳指南

<!doctype html>

<html lang="en">
<head>
    <style>
        .header { 
            display: inline-block;
            margin: 0px;
            background-color: gray;
            padding: 5px;
            border-style: solid;
            border-right: 1px;
            width: 50px;
        }
        .line-item{
            display: inline-block;
            background-color: cadetblue;
            width: 50px;
        }
    </style>
    <meta charset="utf-8">

    <title>Daily Planner</title>
</head>

<body>

    <div style="display: flex; margin: 0px;">
        <div style="flex-shrink: 0; display: inline-block; margin: 0px; padding: 5px; width: 200px; background-color: blue;"></div>
        <div class="header">8:00</div>
        <div class="header">8:15</div>
        <div class="header">8:30</div>
        <div class="header">8:45</div>
        <div class="header">9:00</div>
        <div class="header">9:15</div>
        <div class="header">9:30</div>
        <div class="header">9:45</div>
        <div class="header">10:00</div>
        <div class="header">10:15</div>
        <div class="header">10:30</div>
        <div class="header">10:45</div>
        <div class="header">11:00</div>
        <div class="header">11:15</div>
        <div class="header">11:30</div>
        <div class="header">11:45</div>
        <div class="header">12:00</div>
        <div class="header">12:15</div>
        <div class="header">12:30</div>
        <div class="header">12:45</div>
        <div class="header">1:00</div>
        <div class="header">1:15</div>
        <div class="header">1:30</div>
        <div class="header">1:45</div>
        <div class="header">2:00</div>
        <div class="header">2:15</div>
        <div class="header">2:30</div>
        <div class="header">2:45</div>
        <div class="header">3:00</div>
        <div class="header">3:15</div>
        <div class="header">3:30</div>
        <div class="header">3:45</div>
        <div class="header">4:00</div>
        <div class="header">4:15</div>
        <div class="header">4:30</div>
        <div class="header">4:45</div>
        <div class="header">5:00</div>
        <div class="header">5:15</div>
        <div class="header">5:30</div>
        <div class="header">5:45</div>
        <div class="header">6:00</div>
    </div>

    <div style="display: flex; margin: 0px;">
            <div style="flex-shrink: 0; display: inline-block; margin: 0px; padding: 5px; width: 200px; background-color: red;">Task 1</div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
            <div class="line-item"></div>
        </div>
</body>
</html>

相关问题
最新问题