根據剩餘空間隱藏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表格的內容

回答

相關問題