남은 공간을 기준으로 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

이가 U이 원하는 될 수있다

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 
} 

또한 유지하기 어려운, HTML로 style을 넣어 좋은 생각이 아니다, 을 <div style="width:14px;"></div> 제거합니다.