浮点数CSS定位错误？

Question

我遇到了一个问题，我有两个容器，我希望它们能够并排，但每当我插入另一个float:left容器时，它就会被“击倒”...

我不知道如何解决这个问题......

HTML：

    <div id="news_container">
        <div id="title_container">
            <p class="news_title">Hello World</p>
        </div>
        <p class="news_content">

        ...

       </p>
    </div>
    <div id="news_container">
        <div id="title_container">
            <p class="news_title">Hello World</p>
        </div>
        <p class="news_content">

        ...

       </p>
    </div>
    <div id="info_container"></div>

CSS：

#news_container {
    width:68%;
    height:auto;
    margin-top:1px;
    margin-right:0.083%;
    padding:1%;
    float:left;
    background:#333;
}
    #title_container {
        width:100%;
        height:auto;
        margin:0;
        padding:0;
        border-bottom:solid 1px #222;
    }
        p.news_title {
            margin:0;
            padding:0;
            padding-bottom:5px;
            font-size:24px;
            color:rgba(255,255,255,1);
        }
        p.news_content {
            font-size:12px;
            color:rgba(255,255,255,0.5);
        }
    a.news_link {
            font-size:12px;
            color:rgba(255,255,255,0.7);
            text-decoration:none;
            font-weight:bold;
        }
#info_container {
    width:27.917%;
    height:auto;
    padding:1%;
    top:0;
    margin:0;
    float:right;
    background:#333;
}

提前感谢您的帮助。

Answer 1

嗯，那是因为你的news_container有width: 100%。如果你想将2个div并排设置width: 50%（3个div：33.33% ...）。 http://jsfiddle.net/ZfM6w/2/

如果div的数量不固定，你可以使用overflow或javascript。

Answer 2

切勿将浮球用于此类用途。简单使用CSS的display: table-cell属性。 这是代码。

<div style="background-color: red;display:table-cell">
Box A
</div>
<div style="background-color: green;display:table-cell">
Box B
</div>