用流体设计显示内联块不对齐相同的线路

我正在使用流体Web Design以"百分比"为单位。我还将所有边距和 padings 重置为默认 0px 。任何div都没有边界。不过，为什么默认这些不在同一行中对齐？？？

示例：

<html> 
<head>
<style>
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style> 
</head>
<body> 
<div class="divOne">One</div>
<div class="divTwo">Two</div>
<div class="divThree">Three</div>
</body> 
</html>

请有人帮我。在世界上，这不是在同一行中保持一致的。但是，如果我将其中的任何一个降低到100％以下（例如98％或更少），那么这些都会对齐。但是，如果没有边距，则没有填充。为什么需要这个宽度差距？

您需要在divs之间添加 html注释以取消浏览器解释的空间：

*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}

<div class="divOne">One</div><!--
--><div class="divTwo">Two</div><!--
--><div class="divThree">Three</div>

内联块给出的怪异空间。https://css-tricks.com/fighting-the-pace-between-inline-block-elements/

您可以在一排中有这三个Divs来避免任何hack/tricks。

https://jsfiddle.net/dghkcg04/

<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>

浏览器像白色空间一样解释div，所以这样做：

<!DOCTYPE html>
<html> 
<head>
<style>
*{
    margin:0;
    padding:0;
}
div{
display:inline-block;
margin:0;
padding:0;
}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style> 
</head>
<body> 
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>
</body> 
</html>

相关内容

最新更新

热门标签：