xhtml - 如何让div一直向右展开

Question

演示页面:CLICK HERE

我做了一张图来展示:

从图片中可以清楚地看到，div left_bg 和div middle_bg 之间有一个空隙。 left_bg 没有内容，它的宽度应该是流动的并且适合它的 div 容器 top-container。为了帮助展示差距，我将 left_bg 设置为 width:500px。但是，请注意宽度应该是流畅的。 div middle_bg 也将是流畅的，因为它允许不同的文本更长或更短。

我怎样才能摆脱这个差距并让 left_bg 适合？

更新

我在想也许像表格一样使用 CSS 可以实现我所追求的目标。我试着调整和弄乱，但我无法让它正常工作。我已经设置了 100 rep bounty 来帮助我解决这个问题。

Answer 1

使用表格是最好的方法

<table cellspacing="0" cellpadding="0" style="width: 100%; padding: 0pt; margin: 0pt;">
    <tbody>
        <tr align="top">
            <td style="width: 100%; height: 85px;">
                <div class="left_bg">
                </div>
            </td>
            <td style="">
                <div class="middle_bg">
                    <p>
                        Michicraft Boats</p>
                </div>
            </td>
            <td>
                <div class="right_bg">
                </div>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <div id="top-container-links">
                    <a href="#">Find Nearest Dealer</a> | &nbsp;<a href="#">Request a Quote</a></div>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

并将你的CSS更改为

#top-container .left_bg
    {
        background: none repeat scroll 0 0 #A3AFC6;
        border-color: white -moz-use-text-color white white;
        border-style: solid none solid solid;
        border-width: 1px 0 1px 1px;
        height: 85px;
        width: 100%;
        -webkit-border-radius: 20px 0 0 20px;
        -moz-border-radius: 20px 0 0 20px;
        border-radius: 20px 0 0 20px;
        behavior: url(/PIE/PIE.htc);
    }
    #top-container .middle_bg
    {
        background: none repeat scroll 0 0 #A3AFC6;
        border-top: 1px solid white;
        float: right;
        height: 44px;
        margin-top: -42px;
        text-align: center;
        white-space: nowrap;
    }