Html CSS-与Chrome对齐错误

我的代码如下：

<div style="width: 100%; height: 400px; border-bottom: 1px; text-align: center">
    <div style="float: left; width: 33%;">test</div>
    <div style="display: inline-block; width: 33%;">test</div>
    <div style="float: right; width: 33%;">test</div>
</div>

测试
测试
测试

这是一个正常分辨率的屏幕：

这是一个分辨率非常小的屏幕：

---

为什么在决议中非常小的div不都是33%？如何解决？

你想要这样的东西-对吗？它在任何决议下都有效

-使用相同的标记

注意：

内联块

元素生成2px边距，因此每个元素的宽度不能为33%。要么删除空白，要么只使用30%左右的宽度

---

在上面的例子中，我只是删除了空白。或者，您可以设置

边距：-2px
你想要这样的东西-对吗？它在任何决议下都有效

-使用相同的标记

注意：
内联块
元素生成2px边距，因此每个元素的宽度不能为33%。要么删除空白，要么只使用30%左右的宽度

在上面的例子中，我只是删除了空白。或者，您可以设置
边距：-2px
要么给所有三个
宽度：33%
div
float:left
（如果需要，可以将最后一个保留为
float:right
，但中间的一个也需要一个float），要么删除所有的float并给它们所有
显示：内联块
要么给所有三个
宽度：33%
div
float:left
（如果需要，可以将最后一个保留为
float:right
，但中间的一个也需要一个float），要么删除所有的float并给它们所有
显示：内联块
不确定为什么将middle div设置为
display:inline block。div是继承的
display:block。试试下面的css/html。在我的本地机器上工作

<style type="text/css">

.wrap {
    width: 100%; 
    height: 400px; 
    border-bottom: 1px; 
    text-align: center;
}

.wrap div {
    float: left;
    width: 33%;
    margin: 0 auto;
    padding: 0;
}

.left {
    background-color: red;
}

.middle {
    background-color: blue;
}

.right {
    background-color: green;
}

.clearThis {
    width: 100%;
    height: 0;
    float: none;
    margin: 0 auto;
    padding: 0;
    clear:both;
}

</style>


<div class="wrap">
    <div class="left">test</div>
    <div class="middle">test</div>
    <div class="right">test</div>
    <div class="clearThis"></div>
</div>


.包裹{
宽度：100%；
高度：400px；
边框底部：1px；
文本对齐：居中；
}
.包裹部{
浮动：左；
宽度：33%；
保证金：0自动；
填充：0；
}
.左{
背景色：红色；
}
.中{
背景颜色：蓝色；
}
.对{
背景颜色：绿色；
}
.clearThis{
宽度：100%；
身高：0；
浮动：无；
保证金：0自动；
填充：0；
明确：两者皆有；
}
测试
测试
测试
不确定为什么将中间div设置为
显示：内联块。div是继承的
display:block。试试下面的css/html。在我的本地机器上工作

<style type="text/css">

.wrap {
    width: 100%; 
    height: 400px; 
    border-bottom: 1px; 
    text-align: center;
}

.wrap div {
    float: left;
    width: 33%;
    margin: 0 auto;
    padding: 0;
}

.left {
    background-color: red;
}

.middle {
    background-color: blue;
}

.right {
    background-color: green;
}

.clearThis {
    width: 100%;
    height: 0;
    float: none;
    margin: 0 auto;
    padding: 0;
    clear:both;
}

</style>


<div class="wrap">
    <div class="left">test</div>
    <div class="middle">test</div>
    <div class="right">test</div>
    <div class="clearThis"></div>
</div>


.包裹{
宽度：100%；
高度：400px；
边框底部：1px；
文本对齐：居中；
}
.包裹部{
浮动：左；
宽度：33%；
保证金：0自动；
填充：0；
}
.左{
背景色：红色；
}
.中{
背景颜色：蓝色；
}
.对{
背景颜色：绿色；
}
.clearThis{
宽度：100%；
身高：0；
浮动：无；
保证金：0自动；
填充：0；
明确：两者皆有；
}
测试
测试
测试
不需要额外的编码，请看我的答案。是的，这不是清除它的问题-这是
内联块
元素生成边距的问题。通过使用
内联块
，OP获得了什么好处？对我来说没有意义需要一个额外的编码，见我的答案。是的，这不是清除它的问题-这是
内联块
元素生成边距的问题。通过使用
内联块
，OP获得了什么好处？对我来说没有意义