css를 사용하여 동적 왼쪽 및 고정 오른쪽 열 너비 divs

Question

이전에 많이 답변되었지만 왼쪽에 고정 열과 오른쪽에 동적 열이 필요한 솔루션을 찾을 수 있습니다. 내 상황은 왼쪽에 동적 열이 필요하고 오른쪽에 고정 열이 필요하다는 점에서 다릅니다.

나는이 종류의 작업을하고 있지만 왼쪽 (동적 크기) 열 안에 추가 열을 작성하자 마자 오른쪽 (고정 너비) 열 아래로 떨어지고 페이지의 전체 너비가 채워집니다.

실제로 필요한 것은 고정 된 오른쪽 열에 침입하지 않는 동적 열입니다.

왼쪽 열과 오른쪽 열이 고정되어 있지만 왼쪽에서 동적 열에 다른 세 열 집합이 있어야하지만 센터는 사용 가능한 나머지 공간의 100 %를 사용합니다 (앞서 언급 한 왼쪽 동적 열).

간단히 말하면 페이지 사이에 페이지 폭의 100 %를 사용하고 오른쪽 열은 고정 너비 인 두 개의 열이 있어야합니다. 왼쪽 열에는 바깥 쪽 고정 열을 무시하는 고정 열 및 동적 열이 필요합니다.

아래 예제 코드에서 검은 색 테두리가있는 div는 페이지의 오른쪽에 붙이며 너비가 고정되어야합니다. 빨간색 테두리가있는 div는 검은 색 테두리가있는 div보다 페이지에서 더 이상 이동하지 않아야하며 녹색 및 주황 테두리가있는 div는 빨간색 테두리의 전체 너비 여야합니다. 녹색 테두리가있는 div의 가운데 div는 녹색 테두리가있는 div의 왼쪽 및 오른쪽 열 사이에 사용 가능한 모든 공간을 사용해야합니다.

나는 내부 사업부의 좌측 #에서

<div id="Wrapper" style="width: 100%;"> 
<div id="Container"> 

    <div id="right" style="border: solid 10px black; width: 300px; margin-left: 50px; float: right;"> 
     Fixed right hand column 
    </div> 

    <div id="left" style="border: solid 10px red;"> 
     <div> 
      <div style="border: solid 10px green; float: left;"> 
       <div style="border: solid 1px black; text-align: center; width: 150px; margin-right: 10px; float: left;"> 
        Left 
       </div> 
       <div style="border: solid 1px black; text-align: center; width: 150px; margin-left: 10px; float: right;"> 
        Right 
       </div> 
       <div style="border: solid 1px black; text-align: center; width: 100%;"> 
        Centre 
       </div> 
      </div> 
      <div style="clear: both;"></div> 
      <div style="border: solid 10px orange;"> 
       <asp:Panel runat="server" ID="DynamicWidthPanelForLeftColumn" BackColor="#6699ff" Height="250px"> 
        This panel should use just the left column but instead uses the entire width of the page. 
       </asp:Panel> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

제거 float:left 아래에 내가 가지고있는 코드를 삽입하고 모두 왼쪽과 오른쪽 div에 대한 display:table-cell를 추가했습니다.

<div style="border: solid 10px green; display:table-cell"> 
.... 
</div> 

DEMO