Div在dekstop上没有占据全宽

Question

我试图在没有任何框架的帮助下制作响应式网页。它很基本。

桌面视图：

所有3个div应该显示在彼此旁边。

平板电脑视图：

第一行的前两个div显示，而另一个显示在第二行，占据整个宽度。

移动视图：

每个div占据整个宽度。

问题：

在桌面上，前两个div显示在同一行，而第三个不显示。

以下是我的代码。

HTML

<h1>Our Menu<h1>
<div class="chicken">
chicken
</div>
<div class="beef">
beef
</div>
<div class="sushi">
sushi
</div>

CSS

h1{
    text-align:center;
}
.chicken,.beef, .sushi{
    padding:0 15px;
    margin:0px;
}

 @media screen and (min-width: 992px) {
    .chicken,.beef,.sushi{
        width:33.333333333333333333%;
        display:inline-block;
        float:left;
    }
}

 @media screen and (max-width: 767px) {
        .chicken,.beef,.sushi{
        width:100%;
        display:block;
    }
    /*
        .sushi{
            width:100%;
        }
   */
}
 @media screen and(min-width: 768px) and (max-width: 991px) {

    .chicken,.beef{
        width:50%;
        display:inline-block;
    }
}

小提琴：

Here是小提琴。

Answer 1

使用box-sizing: border-box以便在宽度（也包括边框）中包含填充。否则，33.33333%将略微过大，无法容纳一行中的所有3个div。

Answer 2

我注意到你正在使用33.33333333333%宽度。

这不考虑的是盒子模型的填充/边框;只是内容。

尝试设置box-sizing: border-box;，然后考虑包装盒模型大小中包含的填充/边框。

希望这有帮助！ ：）

Answer 3

奇怪的是（至少对我来说不太直观，乍一看）你的填充物正在妨碍你。

而不是

.chicken,.beef, .sushi{
    padding:0 15px;
    margin:0px;
}

Make为零：

.chicken,.beef, .sushi{
    padding:0; /* changed padding to zero (on all sides)*/
    margin:0px;
}

See updated fiddle

根据评论更新：

将宽度更新为小于33.333333％（为填充提供空间）

.chicken,.beef,.sushi{
    width:30%; /*adjusted width */
    display:inline-block;
    float:left;
}

See updated fiddle 2:

Answer 4

只是一件小事 - 你没有关闭你的h1标签。它应该是：

<h1>Our Menu</h1>

Answer 5

除了设置box-sizing:border-box并使用较低的宽度值之外，还有一个解决方案。您可以在每个现有div中使用另一个div，并在那个 div上设置填充。

以下是一个例子：

<h1>Our Menu<h1>
<div class="chicken">
    <div class="padding">
        chicken
    </div>
</div>
<div class="beef">
    <div class="padding">
        beef
    </div>
</div>
<div class="sushi">
    <div class="padding">
        sushi
    </div>
</div>

然后你的css看起来像这样：

h1{
    text-align:center;
}
.chicken,.beef, .sushi{
    padding:0;
    margin:0px;
}
.padding {
    padding:0 15px;
}

 @media screen and (min-width: 992px) {
    .chicken,.beef,.sushi{
        width:33.333333333333333333%;
        display:inline-block;
        float:left;
    }
}

 @media screen and (max-width: 767px) {
        .chicken,.beef,.sushi{
        width:100%;
        display:block;
    }
    /*
        .sushi{
            width:100%;
        }
   */
}
 @media screen and(min-width: 768px) and (max-width: 991px) {

    .chicken,.beef{
        width:50%;
        display:inline-block;
    }
}