0

我有两个相邻的 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/

4

1 回答 1

0

可能这就是你想要的：

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
}

还要remove <div style="width:14px;"></div>，放在stylehtml里不是好主意，很难维护。

于 2013-03-31T02:34:31.660 回答