html - CSS - Chrome 对齐错误

Question

按照我的代码：

<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%？怎么解决？

Answer 1

你想要这样的东西——对吧？它适用于任何分辨率..

jsFiddle 演示在这里- 使用相同的标记。

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

在上面的示例中，我只是删除了空格。或者，您可以设置margin:-2px;.

Answer 2

要么给所有三个width: 33%div float: left（你可以根据需要保留最后一个，float: right但中间的也需要一个浮点数）或完全删除浮点数并将它们全部给定display: inline-block;。

Answer 3

不知道为什么将中间 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>