根据剩余空间隐藏 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 中不是个好主意，很难维护。