Html 带显示的Div：表保留1倍以上

我有四个div

<div id="blockContainer">
    <div id="blockA">LogInR</div>
    <div id="blockB">Logo</div>
    <div id="blockC">Search</div>
    <div id="blockD">Post</div>
</div>

---

因此，我的blockA具有

宽度：100%

保留

1px

更多。这是因为浏览器计算框大小的方式。它将边框的宽度添加到100%宽度。您需要使用

*{box size:border box；}

更改它的计算方式：

*{框大小：边框框；}
#布洛克{
边框：1px实心#f0f；
显示：表格；
宽度：100%；
}
#区块B{
边框：1px实心#f0f；
显示：表格单元格；
}
#布洛克{
边框：1px实心#f0f；
显示：表格单元格；
宽度：100%；
}
#封锁{
边框：1px实心#f0f；
显示：表格单元格；
}

登录者
标志
搜寻
邮递

默认情况下，使用100%宽度和边框将生成100%以上的边框宽度元素。尝试使用框大小

#blockA、#blockB、#blockC、#blockD{
框大小：边框框；
}
#布洛克{
边框：1px实心#f0f；
显示：表格；
宽度：100%；
}
#区块B{
边框：1px实心#f0f；
显示：表格单元格；
}
#布洛克{
边框：1px实心#f0f；
显示：表格单元格；
宽度：100%；
}
#封锁{
边框：1px实心#f0f；
显示：表格单元格；
}

登录者
标志
搜寻
邮递

请在你的问题中解释你的问题。

1px

除了什么？试试

框大小：边框框

，确定这是否是您的意思。其他块呢，相同的问题？不知道你的问题是什么，但可能是因为边界：px？顺便说一句，你的问题在所有浏览器中都存在吗？尝试使用0px创建边框，您的问题是否仍然存在。尝试使用

表格单元格

，或者使用

表格单元格

或

表格

更改css，只需使div浮动并给出宽度，您的结构毫无意义！谢谢，现在可以用了。

#blockA {
    border: 1px solid #f0f;
    display: table;
    width: 100%;
}
#blockB {
    border: 1px solid #f0f;
    display: table-cell;
}
#blockC {
    border: 1px solid #f0f;
    display: table-cell;
    width: 100%;
}
#blockD {
    border: 1px solid #f0f;
    display: table-cell;
}