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中并不难维护。

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

1 个答案: