html - 根据剩余空间隐藏 div 表的内容

Question

我有两个相邻的 div 框。左侧框包含一个“div 表”。调整页面大小时，我希望隐藏左侧 div 表的内容，例如溢出:隐藏。但是，左框包含“剩余”空间，而右框的宽度为 35%。

当 div 表格的内容比“剩余空间”(左框的宽度)宽时，表格的右边框将不再可见。

我想隐藏图像的剩余部分，但一直看到 div 表的右边框。这可以使用 div 表来完成吗？

HTML

    <div class="table" id="containerRight">Some content on the right</div>
<div id="containerLeft">
    <div class="table" id="tableLeft">
        <div class="table-row">
            <div class="table-cell">
                <div style="width:14px;"></div>
            </div>
            <div class="table-cell">Some title</div>
            <div class="table-cell">
                <div style="width:14px;"></div>
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell"></div>
            <div class="table-cell">
                    <!-- This is the content of the LEFT table -->
                    <img src="http://oasis-church-nj.com/wp-content/uploads/2011/04/easter-egg.jpg" style="height:100px; width:500px;" />
            </div>
            <div class="table-cell"></div>
        </div>
        <div class="table-row">
            <div class="table-cell"></div>
            <div class="table-cell"></div>
            <div class="table-cell"></div>
        </div>
    </div>
</div>

CSS

.table {
    display:    table;
    overflow:   hidden;
    border-collapse:    collapse;
}

.table-row {
    display:    table-row;
}

.table-cell {
    display:    table-cell;
    word-break: all;
    overflow: hidden;
}

#containerLeft {
    background: #F0F;
    position:   relative;
    display:    block;
    overflow:   hidden;
    margin:     0px 0px 15px 0px;
}

#containerRight {
    background: #FF0;
    position:   relative;
    min-width:  220px;
    max-width:  400px;
    width:      35%;
    height:     300px;
    float:      right;
    margin:     0px 0px 15px 15px;
}

例子可以在这里找到。将 HTML 表格变宽变小，右边框将消失。 http://jsfiddle.net/gqmJ9/

Answer 1

也许这就是你想要的:

http://jsfiddle.net/Bh8hg/1/

只是在左边的 div 上做了一个真正的边框。

#containerLeft {
    background: #F0F;
    position:   relative;
    display:    block;
    overflow:   auto;
    margin:     0px 0px 15px 0px;
    border:     #F0F 15px solid;    //real border
}

同时删除 <div style="width:14px;"></div> ,放style不是个好主意在 html 中，难以维护。