Question

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

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

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

它会创建两个div（在我的样式表中，一个有width:20%，另一个有width:80%。然而，在div之后还有一个空格，因为每个标记之间的换行计为一个空格不通过</div><div...使我的HTML变得丑陋，我该怎样做才能摆脱这个空间？

我已经尝试过谷歌搜索各种各样的东西，比如“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;
}

Here's the fiddle

在HTML中删除div之后的空格

2 个答案: