html - 如何在使用 ctrl- 缩放时仍然彼此相邻的包装器中均匀地调整三个 float 左侧 div？

Question

我有三个相互 float 的 div。当窗口为全尺寸且浏览器缩放为 100%(即默认正常)时，它们看起来不错。但是，当我一次又一次地执行 Ctrl- 直到最后一个缩放大小时，第三个 div 就会下降到前两个 div 之下。我该如何解决？我希望这三个 div 应该保持相邻，即使页面缩小到最小尺寸也是如此。

这是当页面大小正常时 -

这是页面缩小到最大的时候 -

HTML -

<div id="three_float_left_divs"> <!-- three_float_left_divs starts here -->
    <div class="float_left_div intro">
        <h3>About Us</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <span><a href="#">more+</a></span>
    </div>
    <div class="float_left_div posts">
        <h3>Latest News</h3>
        <div class="post_wrapper">
            <div class="post_thumb">
                <img src="images/news.png" height="50" width="50" border="0" alt="news" />
            </div>
            <div class="post_txt">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span><a href="#">more+</a></span></p>
            </div>
            <div class="clr"></div>
            <div class="post_separator"></div>
        </div>
        <div class="post_wrapper">
            <div class="post_thumb">
                <img src="images/news.png" height="50" width="50" border="0" alt="news" />
            </div>
            <div class="post_txt">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span><a href="#">more+</a></span></p>
            </div>
            <div class="clr"></div>
            <div class="post_separator"></div>
        </div>
        <div class="post_wrapper">
            <div class="post_thumb">
                <img src="images/news.png" height="50" width="50" border="0" alt="news" />
            </div>
            <div class="post_txt">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span><a href="#">more+</a></span></p>
            </div>
            <div class="clr"></div>
            <div class="post_separator"></div>
        </div>
    </div>
    <div class="float_left_div posts">
        <h3>Upcoming Events</h3>
        <div class="post_wrapper">
            <div class="post_thumb post_event">
                <div class="post_month">June</div>
                <div class="post_date">25</div>
            </div>
            <div class="post_txt">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
            </div>
            <div class="clr"></div>
            <div class="post_separator"></div>
        </div>
        <div class="post_wrapper">
            <div class="post_thumb post_event post_current">
                <div class="post_month">July</div>
                <div class="post_date">12</div>
            </div>
            <div class="post_txt post_txt_current">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
            </div>
            <div class="clr"></div>
            <div class="post_separator"></div>
        </div>
        <div class="post_wrapper">
            <div class="post_thumb post_event">
                <div class="post_month">Aug</div>
                <div class="post_date">8</div>
            </div>
            <div class="post_txt">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
            </div>
            <div class="clr"></div>
            <div class="post_separator"></div>
        </div>
    </div>
    <div class="clr"></div>
</div> <!-- three_float_left_divs ends here -->

CSS -

#three_float_left_divs
{
    padding:0 12px;
}

#three_float_left_divs .float_left_div
{
    border:1px solid #DDDDDD;
    width:285px;
    min-height:315px;
    float:left;
    margin:10px;
}

#three_float_left_divs .intro h3
{
    font-size:16px;
    color:#FFF;
    font-style:italic;
    background:#E00B07;
    padding:15px;
}

#three_float_left_divs .posts h3
{
    font-size:16px;
    color:#1A3175;
    font-style:italic;
    background:#E8E8E8;
    padding:15px;
}

#three_float_left_divs .float_left_div p
{
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:150%;
    color:#454545;
    padding:10px 15px;
}

#three_float_left_divs .intro span a
{
    color:#E00B07;
    margin-left:15px;
    font-weight:bold;
    font-size:14px;
    text-decoration:none;
}

#three_float_left_divs .intro span a:hover
{
    text-decoration:underline;
}

#three_float_left_divs .posts .post_wrapper
{
    padding:10px 15px;
}

#three_float_left_divs .posts .post_wrapper .post_thumb
{
    float:left;
    border:1px solid #dddddd;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    width:50px;
    margin-top:3px;
}

#three_float_left_divs .posts .post_wrapper .post_event
{
    border:none;
    margin-top:3px;
}

#three_float_left_divs .posts .post_wrapper .post_thumb .post_month
{
    background:#0d2972;
    color:#fff;
    padding:5px;
    text-align:center;
    font-size:13px;
}

#three_float_left_divs .posts .post_wrapper .post_thumb .post_date
{
    background:#e8e8e8;
    padding:7px 5px;
    text-align:center;
    font-style:italic;
    color:#454545;
}

#three_float_left_divs .posts .post_wrapper .post_current .post_month
{
    background:#e00b07;
}

#three_float_left_divs .posts .post_wrapper .post_txt
{
    float:left;
    width:198px;
    margin-left:10px;
}

#three_float_left_divs .posts .post_wrapper .post_txt p
{
    padding:0;
    font-size:13px;
}

#three_float_left_divs .posts .post_wrapper .post_txt p span a
{
    color:#1a3175;
    font-weight:bold;
    text-decoration:none;
}

#three_float_left_divs .posts .post_wrapper .post_txt p span a:hover
{
    text-decoration:underline;
}

#three_float_left_divs .posts .post_wrapper .post_separator
{
    border-bottom:1px solid #dddddd;
    margin-top:10px;
}

#three_float_left_divs .posts .post_wrapper:last-child .post_separator
{
    border-bottom:none;
}

#gray_div_separator
{
    padding:8px;
    background:#D7D7D7;
}

那么我怎样才能阻止它发生呢？

Answer 1

.float_left_div {width: 33.33333333%;padding:0 15px;}