儿童不平等

Question

我正在尝试为我的网站显示包含不同项目的四个网格，但是现在所有的儿童div都具有相同的大小：

<div class="container">
    <div class="grid4">
        <input type="submit" name="input1" value="input1"/>
    </div>
    <div class="grid4">
        <input type="submit" name="input2" value="input2"/>
    </div>
    <div class="grid4">
        <input type="submit" name="input3" value="input3"/>
    </div>
    <div class="grid4 no-border">
        <input type="submit" name="input4" value="input4"/>
    </div>
</div>

CSS：

.container {
    width: 100%;
    margin: 30px 0 30px 0;
}

.grid4 {
    width: 25%;
    padding: 20px;
    border-right: 2px solid rgba(40,40,40,0.8);
    display: inline;
}

.no-border {
    border: none;
}

我在jsfiddle中测试过它们确实具有相同的大小：

http://jsfiddle.net/ME7k8/

但是，你可以清楚地看到最后一个chil div更小：

为什么？有什么帮助吗？

修改如果图片中的图片太小：

elemento {
}
.grid4 {
    width: 25%;
    padding: 20px;
    border-right: 2px solid rgba(40, 40, 40, 0.8);
    display: inline;
}
div {
    text-align: left;
}
body, div, td {
    font-family: 'Noto Sans',Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: #666;
}
Inherited from body
body {
    text-align: center;
}

编辑我再次使用浏览器检查器检查，我可以看到第一个div大约是.container div的50％。它具有与其他div完全相同的css属性。

Answer 1

由于以下原因，3个第一个div比上一个更宽：

1。他们拥有CSS display:inline（意味着他们的宽度受到空格，换行等影响）。

2。最后一个div没有边框，与前3个不同。

给它们相同的宽度

所以你需要做的是确保所有4个div具有相同的宽度，删除提交按钮和它们的父div之间的所有空格，并将padding-right:22px;添加到最后一个div（如果你想要的话） 4个div 完全相同的宽度。）

<强> jsFiddle demo.

Answer 2

我使用你的jdFiddle，并使用蓝色背景来查看差异，所有div都具有相同的大小，但是，我声明了容器的大小

.container {
  width: 1200px;
  background-color: tomato;
}

并使用grid4属性

重新调整div的大小

.grid4 {
    display: block;
    float: left;
    width: 20%;
    padding: 2.3%;
    border-right: 0.2% solid rgba(40,40,40,0.8);
    display: inline;
    background-color: blue;
}

当你为每一个（20px）添加填充时，像素被添加到＆＃34; 25％＆＃34;总大小...所以这使它成为一个更大的元素，也许这是你无法看到的差异......考虑到这一点，可能你可以解决你的问题... {{3 }}

Answer 3

你的最后一个元素没有边框，而其他元素可能没有边框。

Borders占用空间，边距和填充也是如此。

在浏览器中按ctrl + shift + i查看框模型并将鼠标悬停在其中， http://www.w3schools.com/css/css_boxmodel.asp

从内到外，有填充，边框，边距，轮廓。 前三个为你的＆＃34;盒型号添加尺寸＆＃34;。大纲没有。

如果指定宽度或高度，则任何填充，边框或边距都将使您的元素不再指定宽度或高度。毋庸置疑，这会带来各种令人头疼的问题

解决这个问题的一个解决方案是使用box-sizing：border-box; 这使得指定的填充和边框实际上是您指定的宽度或高度。保证金仍将增加维度，如果您考虑它，这是有道理的。

http://css-tricks.com/box-sizing/

另外一定要注意前缀，以便它适用于所有浏览器。 您可能不想在此处理此问题，但请查看最后一个链接中的示例以及caniuse.com。

如果您不想手动处理跨浏览器支持，可以使用库自动对CSS进行后处理以添加适当的前缀。这使用caniuse.com数据库，因此只要您更新此库，您的后处理css文件将具有最新的前缀，而无需担心跟上浏览器版本或单独的css功能弃用。

https://github.com/ai/autoprefixer 关于自动加前缀的文章 http://css-tricks.com/autoprefixer/