桌面版Div未占满整个宽度

Question

我正在尝试制作一个响应式网页，没有使用任何框架。它相当基础。

桌面视图：

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

平板电脑视图：

前两个div在第一行上显示，而另一个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;
    }
}

Fiddle:

Here is the fiddle.

- user379888

---

那是个打字错误。应该是 min-width 和 max-width。 - user379888

Answer 1

使用box-sizing: border-box，这样它将包括宽度中的填充（以及边框）。否则，33.33333％将略微过大，无法将所有3个div放在一行上。

- 4castle

Answer 2

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

这并没有考虑框模型的填充/边框；只有内容。

尝试设置 box-sizing: border-box;，它将考虑填充/边框包含在框模型大小中。

希望这可以帮助你！ :)

- Geoff James

Answer 3

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

与其这样做

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

将其归零：

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

查看更新后的fiddle

根据评论进行更新:

将宽度更新为小于33.333333％（以给填充留出空间）

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

查看更新的fiddle 2:

(Note: "fiddle" is a term used in programming to refer to a small piece of code or program that demonstrates a concept or solves a problem.)

- blurfus

---

谢谢，但我确实需要它们之间的15像素填充。 - user379888

那么如何缩小宽度呢？你需要将33.33333%改为30%（也许更少）。 - blurfus

要解决填充问题，请使用 box-sizing: border-box。然后它将在宽度计算中包括填充（和边框）。 - 4castle

Answer 4

只是一个小事情 - 你没有关闭你的h1标签。应该这样写：

<h1>Our Menu</h1>

- gavgrif

Answer 5

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

内部使用另一个

，并在该 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;
    }
}

- Cave Johnson