DIV在dekstop上未占全宽

Question

我正在尝试制作一个没有任何框架帮助的响应式网页。这很基本。

所有的3个div应该显示在一起。

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

每个div占据全宽度。

在桌面上，前两个div出现在同一行，而第三个则不在。

下面是我的代码。

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

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;
    }
}

这是小提琴。

Answer 1

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