html - 删除 HTML 中 div 后的空格

Question

这个问题看起来很简单，但我遇到了一些麻烦。

如果我有两个 div，给定这些样式：

<div class="col col20">
    Content left
</div>
<div class="col col80">
    Content right
</div>

它将创建两个 div（在我的样式表中，一个 haswidth:20%和另一个width:80%。但是，在 div 之后仍然有一个空格，因为每个标签之间的换行符算作一个空格。如果不让我的 HTML 变得丑陋</div><div...，我该怎么办摆脱这个空间？

我试过用谷歌搜索各种东西，比如“div 后的 html 空间”等，但我只是收到一堆新手问题，询问 CSS 边距等等。对不起！

编辑：目前的CSS如下：

.col {
    background:lime; /* merely for testing*/
    display:inline-block;
}

.col20 {
    width:20%;
}

.col80 {
    width:50%;
}

Answer 1

不可能有任何空间。检查这个：

HTML：

<div class="col col20">
    Content left
</div>
<div class="col col80">
    Content right
</div>

CSS：

.col {
  float: left;
}

.col20 {
  width: 20%;
  background: #ddd;
}

.col80 {
  width: 80%;
  background: #fdd;
}

http://codepen.io/Chovanec/pen/aktzr

Answer 2

如果您遇到空间问题，我建议使用浮点数：

CSS

.col20{
    width:20%;
    background-color:#F00;
}
.col80{
    width:80%;
    background-color:#FF0;
}
.col{
    float:left;
    overflow:hidden;
}
.clear{
    clear:both;
    height:1px;
    margin-bottom:-1px;
}

这是小提琴