3 열 레이아웃, 왼쪽/오른쪽 변수 크기, 중간 유체 용 CSS 사용

Question

3 열 레이아웃이 필요합니다. 첫 번째 및 세 번째 열 크기는 이미지 또는 가변 길이 텍스트 (또는 다른 이미지)가 있기 때문에 가변적이지만 중간이 필요합니다. 배경 이미지와 휴식 공간을 채우기 위해이 같은 그것은 내가 상상처럼 작동 할 경우 :

HTML :

<div class="left-vp"> 
    <img src="~/Content/images/vp1.png" /> 
</div> 
<div class="mid-vp"> 

</div> 
<div class="right-vp"> 
<p> 
    //some text here or another img 
</p> 
</div> 

CSS

.left-vp { 
    float: left; 
} 

.mid-vp { 
    height: 2px; 
    background: #FFFFFF url("images/dot.png") repeat-x; 
    width: 100%; 
} 
.right-vp { 
    float: right; 
} 

CSS와 같은 기능이 있습니까?

Answer 1

HTML

<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="center"></div> 
</div> 

CSS 행동

#container{width:100%;} 
#left{float:left;width:100px; height: 100px; background-color: gray;} 
#right{float:right;width:100px; height: 100px; background-color: green;} 
#center{margin:0 auto;width:100%; height:100px; background-color: blue;} 

->이 있다면 http://jsfiddle.net/5xfR9/39/

Answer 2

내가 실제 요구 사항은 그 중앙 컬럼에 대해 무엇인지 모르겠지만 질문을하는 것처럼 배경을 포함하기 만하면 바를 움직일 수 없습니까? 컨테이너 자체에 ckground 스타일? 실제로 확인 컨테이너를 만들기 위해 clearfix 클래스를 추가 한

#container{ width:100%; background-color: blue; } 
#left{ float:left; height: 100px; background-color: red; } 
#right{ float:right; height: 100px; background-color: green; } 


.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 

http://jsfiddle.net/5xfR9/46/

HTML

<div id="container" class="clearfix"> 
    <div id="left">some text</div> 
    <div id="right">some text</div> 
</div> 

CSS : ERIKS 'jsfiddle에 대한 확장으로

에 번째가 포함되어 있습니다. e 열을 표시하여 배경을 표시 할 수 있습니다 (HTML5 Boilerplate 버전의 clearfix 클래스).

Answer 3

마크 업을 제어 할 수 있고 변경하는 데 신경 쓰지 않는다면 테이블 블록 스타일을 사용하여이를 수행 할 수 있습니다. 모든 시나리오를 처리하고 크기를 조정할 수있는 유일한 방법입니다.

HTML

<div class="container"> 
    <div> 
    <div class="col col1"> 
     <div class="nowrap">Column 1</div> 
    </div> 
    <div class="col col2 fill center"> 
     <div class="nowrap">Column 2</div> 
    </div> 
    <div class="col col3"> 
     <div class="nowrap">Column 3</div> 
    </div> 
    </div> 
</div> 

CSS 행동

.container { width: 100%; } 
.container { display: table; } 
.container > div { display: table-row; } 
.container > div > div { display: table-cell; } 
.container > div > div { padding: .5em; } 

.container .nowrap { white-space: nowrap; } 
.container .fill { width: 100%; } 
.container .center { text-align: center; } 

.col1 { background: red; } 
.col2 { background: blue; } 
.col3 { background: green; } 

: 명심해야 할 http://jsfiddle.net/Vxc3n/1/

몇 가지 :

1. 첫 번째와 세 번째 열에 텍스트가 포함 된 경우 공백 : 반복되지 않는 CSS 스타일이있는 DIV로 묶어야합니다.
2. 채우기 열이 두 개 이상인 경우 총 너비 = 100 %
3. 당신은

Answer 4

당신은 단지 분-width와 max-width 속성들을 플레이 할 필요가 폭 필요한 최소한의 이상으로 열을 축소 할 수 없습니다 (예를 들어, 2 열, 50 % 사용) 네가 원하는 걸 얻을 때까지. 그리고 열의 최대 너비를 본문 또는 줄 바꿈의 백분율로 지정할 때 가장 쉽게 작동하는 것으로 보입니다. 여기

내가 함께 넣어 작동하는 예입니다

http://jsfiddle.net/76Ep3/1/

HTML

<div id="wrap"> 
    <div id="left">LEFT content...</div> 
    <div id="center">CENTER content...</div>  
    <div id="right">Right content</div> 
</div> 

CSS

*{margin:0;padding:0;} 

body, html{ 
    height:100%; 
} 

#wrap { 
    min-width:390px; 
    height:100%; 
} 

#left{ 
    float:left; 
    min-width:100px; 
    max-width:37%; 
    margin:0 auto; 
    background-color:blue; 
    height:100%; 
} 

#center { 
    float:left; 
    min-width:100px; 
    max-width:20%; 
    background-color:red;  
    height:100%; 
} 

#right { 
    float:left; 
    min-width:100px; 
    max-width:37%; 
    background-color:yellow; 
    height:100%; 
}