浮动不正确吗？

Question

我想做以下格式：

所以这就是我所做的：

<style>
.toptitle{
 font-size:14px;
}
.toprating{
background:yellow;
float:left;
font-size:12px;
}
.topcontainer{
border-bottom:1px #CCCCCC solid;
}
</style>

<div class="topcontainer">
<div class="toprating">256</div>
<div class="toptitle">Lorem Ipsum...</div>
</div>
<br>
<div class="topcontainer">
<div class="toprating">256</div>
<div class="toptitle">Lorem Ipsum...</div>
</div>

现在，在firefox，chrome，safari中，这种方法效果很好，但在IE浏览器中标题下降了大约30 px。

代码中是否有错误，或者有更好的代码可以执行此操作吗？

Answer 1

在IE中你需要像这样浮动标题：

.toptitle{
  font-size:14px;
  float: left;
}

或者，如果评级是一个恒定的宽度，只需给它这样的空间：

.toptitle{
  font-size:14px;
  margin-left: 40px;
}
.toprating{
  background:yellow;
  float:left;
  font-size:12px;
  width: 40px;
}

Answer 2

你需要浮动topTitle并清除。

<style>
.toptitle{
  font-size:14px;
  float: left;
}
.toprating{
  background:yellow;
  float:left;
  font-size:12px;
}
.topcontainer{
  border-bottom:1px #CCCCCC solid;
}
.clear {
  clear: both;
} 
</style>

<div class="topcontainer">
  <div class="toprating">256</div>
  <div class="toptitle">Lorem Ipsum...</div>
  <div class="clear"/>
</div>
<br>
<div class="topcontainer">
  <div class="toprating">256</div>
  <div class="toptitle">Lorem Ipsum...</div>
  <div class="clear"/>
</div>