색 왼쪽 및 오른쪽 배경 센터

Question

에서 오히려 이제 레이아웃 나는 배경을 원하는 무엇을 달성하고자하는 것은이

<style type="text/css"> 
     body { color: #4B5E6F; font-size: 11px; line-height: 1.8em; } 
     #main-content-wrapper { background: #F6F7F8; border-left: 1px solid #DBDFE2; border-right: 1px solid #DBDFE2; min-height: 400px; } 
     #content-left { float: left; width: 150px; min-height: 400px; background: #F6F7F8; } 
     #nav-left { list-style-image: none; margin: 0px; } 
     #nav-left li { margin: 6px 0px 6px 0px; } 
     #nav-left li .nav-parent { font-family: 'open_sans_extraboldregular'; text-transform: uppercase; color: #595F78; line-height: 22px; text-decoration: none; cursor: pointer; letter-spacing: 0px; margin: 0px 0px 0px 7px; font-size: 12px; } 
     #nav-left li .nav-sub { font-family: 'open_sansregular'; color: #595F78; line-height: 22px; text-decoration: none; cursor: pointer; letter-spacing: 0px; margin: 0px 0px 0px 5px; font-size: 11px; } 
     #content { float: left; border-left: 1px solid #DBDFE2; border-right: 1px solid #DBDFE2; min-height: 500px; width: 550px; padding: 10px; background: white; } 
     #content-right { float: left; width: 216px; padding: 10px; background: white; } 
     .nav-left-separator { background: url("resources/images/separator_menu.gif") repeat-x; height: 1px; display: block; margin: 0px 2px 0px 2px; } 
     .page-header { font-family: 'open_sansbold'; font-size: 16px; color: #8E354C; line-height: 22px; font-weight: normal; border-bottom: 1px solid #E4E7D4; margin-bottom: 15px; margin-top: 15px; } 
     ul { list-style-image: url('resources/images/fleche.gif'); margin: 4px 0px 0px 15px; } 
     ul li span { font-family: 'open_sansbold'; } 
    </style> 

<div id="main-content-wrapper"> 
      <div id="content-left"> 
       <ul id="nav-left"> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><a href="" class="nav-sub">Lorem</a></li> 
        <li><a href="" class="nav-sub">Lorem</a></li> 
        <li><a href="" class="nav-sub">Lorem</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
        <li><span class="nav-left-separator"></span></li> 
        <li><a href="" class="nav-parent">Menu</a></li> 
       </ul> 
     </div> 
      <div id="content"> 
       <div class="page-header">Lorem ipsum dolor sit amet</div>     
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
       when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
       electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
       and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </div> 
      <div id="content-right"> 
       <div class="page-header">Lorem ipsum</div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
       <div class="page-header">Lorem ipsum</div> 
       <ul> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
       </ul> 
       <div class="page-header">Lorem ipsum</div> 
       <ul> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
        <li><span>Overview</span></li> 
       </ul> 
     </div> 
    </div> 

인이

처럼 센터의 콘텐츠가 아래로 늘어나는 경우 왼쪽 및 오른쪽의 색상이 센터에서 이보다 작게 표시되면 왼쪽 및 오른쪽 등판 둥근 색깔도 색깔이 있어야합니다. 얘들 아 제안있어? 어쨌든 고마워요

Answer 1

이 유형의 기능의 경우 디스플레이를 사용할 수 있습니다 : 테이블 속성. 예를 들어

은 다음과 같이 쓰기 :

div{display:table-cell;width:100px;background:red} 

.center{ 
    background:green; 
    width:200px; 
} 
.right{background:yellow;} 

확인 다음은이 http://jsfiddle.net/HuxCZ/

Answer 2

콘텐츠 열 divs를 height : 100%으로 만드십시오. 그걸로 다른 열을 가지고 필요할 때 래퍼를 늘려야합니다 ... 이론적으로 ...

Answer 3

샘플 일반 코드입니다. 당신은

<div id="container3"> 
    <div id="container2"> 
     <div id="container1"> 
      <div id="col1"> 
      test 

       <!-- Column one end --> 
      </div> 
      <div id="col2"> 
       Lorem ipsum dolor sit amet.................. 
       <!-- Column two end --> 
      </div> 
      <div id="col3"> 
       <!-- Column three start --> 
       dgh 

       <!-- Column three end --> 
      </div> 
     </div> 
    </div> 
</div> 

는 CSS

#container3 { 
    clear:left; 
    float:left; 
    width:100%; 
    overflow:hidden; 
    background:#89ffa2; /* column 3 background colour */ 
} 
#container2 { 
    clear:left; 
    float:left; 
    width:100%; 
    position:relative; 
    right:33.333%; 
    background:#ffa7a7; /* column 2 background colour */ 
} 
#container1 { 
    float:left; 
    width:100%; 
    position:relative; 
    right:33.33%; 
    background:#fff689; /* column 1 background colour */ 
} 
#col1 { 
    float:left; 
    width:29.33%; 
    position:relative; 
    left:68.67%; 
    overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:29.33%; 
    position:relative; 
    left:72.67%; 
    overflow:hidden; 
} 
#col3 { 
    float:left; 
    width:29.33%; 
    position:relative; 
    left:76.67%; 
    overflow:hidden; 
}​ 

DEMO http://jsfiddle.net/pV44s/1/

Answer 4

당신 내부 div의에서 float:left 및 min-height를 제거하고 추가이

HTML과 비교하여 CSS를 변경할 수 있습니다 display:table-cell;

http://jsfiddle.net/N8mDD/2/

이