缩小页面，我的div继续下一行

Question

当我缩小谷歌浏览器时，我的右侧div继续下一行，我正在试图弄清楚我做错了什么。它可能是显示内联块吗？我在这里很困惑，但看看：

我最新的新内容

中没有任何内容

#latestnews {   
}

我的左派＆amp;右栏

.left {
    width: 70px;
    float: left;
    margin: 3px;
    height: 60px;
    padding-bottom: 5px;
    border: 1px solid #C2C2C2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #E9E9E9;
}

.right{
    float: left;
    padding-left: 5px;
    margin-left: 10px;
    margin: 3px;
    width: 491px;
    height: 60px;
    border: thin solid #CCC;
    background: #E9E9E9;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding-bottom: 5px;
}

它显示的内容：

<div class="left" style="clear:both;"> 
    <div class="date">
        <span class="day">17</span> 
        <span class="month">Feb</span> 
        <span class="year">2014</span>
    </div>
</div><!-- End Left Column -->
<div class="right">right</div>

当我缩小时，它会显示：

但在普通视图中，它显示了这一点：

我可能没有在#latestnews的容器中包含任何内容吗？谢谢大家的帮助！

Answer 1

我的猜测是你试图把右边的float: left样式放在右边，这就是你遇到这个问题的原因。

为什么不尝试删除这两种float: left样式，并将其替换为display: inline-block。 那么你唯一的问题应该是放大。