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

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

当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/

来源

2013-03-31 Jeffrey

边框？你是指洋红色背景色的条纹吗？ –

请参阅表格9格，3行3列。中心单元格是“内容”，而外部8个单元格是我定义为“边框”的内容。因为在最终的代码中，它们将被填充图像以显示一个漂亮的盒子。 – Jeffrey

可能这为u想要什么：

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

只需做一个真正的界向左股利。

#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中，很难维护好主意。

来源

2013-03-31 02:34:31 Sho

差不多，我现在也想填充背景图片的边框。添加了

以显示在图像的左侧和右侧实际上有东西:) – Jeffrey

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

回答

相关问题