Question

我正在使用流体网页设计，其宽度为＆＃34;百分比＆＃34;。我还将所有边距和填充重置为默认 0px 。任何div都没有边框。仍然，为什么默认这些不在同一行？

示例：

＆＃13;

<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>

＆＃13;

请有人帮助我。这个世界怎么没有在同一条线上对齐。但如果我将其中任何一项的％减少到100％以下（如98％或更低），那么这些就会对齐。但是，如果没有边距，则没有填充。为什么需要这个宽度差距？

Answer 1

您需要在div之间添加 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>

Answer 2

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

你可以将这三个div放在一行，以避免任何黑客攻击。

https://jsfiddle.net/dghkcg04/

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

Answer 3

浏览器解释de 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>

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

3 个答案: