Question

我试图在不使用浮点数的情况下实现这个简单的结构：http://cl.ly/image/120w2S12213O

我是Web Design的新手，所以我有点迷茫。为什么绿色和红色元素被白色间隙隔开？它不是填充，也不是边缘......我无法理解它。谢谢。

这是HTML：

<body>
    <header></header>
    <section></section>
    <aside></aside>
    <footer></footer>
</body>

这就是CSS。

body { 
width: 1024px;
height: 612px;
margin: 0 auto; }

header {
position: relative;
top: 0;
width: 100%;
height: 100px;
box-sizing: border-box;
background-color: blue; }

section {
position: relative;
margin: 0;
padding: 0;
width: 70%;
height: 600px;
box-sizing: border-box;
background-color: red;
display: inline-block; }

aside {
position: relative;
margin: 0;
padding: 0;
left: 0;
width: 28%;
height: 600px;
box-sizing: border-box;
background-color: green;
display: inline-block; }

Answer 1

这是因为您将它们声明为display: inline-block，然后您在代码中添加了一个新行，从而产生了空白。您可以使用以下方法修复它：

<header></header>
<section></section><!--
--><aside></aside>
<footer></footer>

或

<header></header>
<section></section><aside></aside>
<footer></footer>

请参阅此演示：http://jsfiddle.net/jonigiuro/cE4t5/

另外，我没有看到使用display: inline-block和floats的原因

Answer 2

空间是由于元素是内联的，并且内联元素对空白区域敏感。只需删除代码中的空格即可消除差距。

<header></header>
<section></section><aside></aside>
<footer></footer>

<强> jsFiddle example

Answer 3

您必须在float：left部分使用并将宽度：30％放在旁边：

section {
  position: relative;
  margin: 0;
  padding: 0;
  width: 70%;
  height: 600px;
  box-sizing: border-box;
  background-color: red;
  display: inline-block;
  float: left;
}

aside {
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  width: 30%;
  height: 600px;
  box-sizing: border-box;
  background-color: green;
  display: inline-block;
}

观看演示：http://jsfiddle.net/9kELA/

为什么这些元素是分开的？

3 个答案: