html - 缩小页面，我的 div 在下一行

Question

当我在 Google Chrome 上缩小时，我右边的 div 出现在下一行，我试图找出我做错了什么。它可能是一个显示内联 block 吗？我在这里很困惑，但是看:

我最新的新id什么都没有

#latestnews {   
}

我的左右栏

.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>

当我缩小时，它会显示:

但在普通 View 中，它显示为:

有没有可能我没有在我的容器中为 #latestnews 添加任何东西？感谢所有帮助!

Answer 1

我的猜测是您试图放在右侧的 div 上的 float: left 样式是您遇到该问题的原因。

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