너비가 세 열

-1

나는 잠시 동안 문제에 대한 해결책을 내놓기 위해 앉아 있었다. 나는 세 개의 열 (왼쪽, 가운데, 오른쪽)으로 구성된 웹 사이트를 만들고 싶습니다. 이 세 가지가 함께 화면 너비 전체를 커버합니다. 하나의 열은 고정 된 픽셀 값으로 구성되며 다른 두 열은 중간 열이 화면의 가운데에 배치되는 너비와 같아야합니다.너비가 세 열

왼쪽 및 오른쪽 열이 필요한 이유는 뒤에있는 것을 숨기고이 항목을 가운데 열에 애니메이션으로 적용하기 때문입니다.

누구나 해결책이 있습니까?

출처

2012-12-10 Nicklas Wiborg

나는이 문제를 해결 있지만 세 개의 열을 사용하여. 대신 나는 가운데 열을 가운데에 배치하고 클립을 사용하여 지정된 픽셀 외부의 모든 것을 숨 깁니다. –

너비가 10000 %로 조금 어둡습니다. 어쩌면 누군가가 더 깨끗한 해결책을 제시 할 수는 있지만, 나는 이것이 당신이 설명하는 것을 할 것이라고 생각합니다. 이러한 종류의 레이아웃은 순수한 CSS 솔루션을 찾고있을 때 약간 까다 롭습니다.

HTML :

이

<div id="content"> 
<p>Content goes in here</p> 
<ul> 
    <li>Whatever</li> 
    <li>Kind</li> 
    <li>Of</li> 
    <li>Content</li> 
</ul>   
<div class="sideCol" id="left"></div> 
<div class="sideCol" id="right"></div>

CSS :

#content 
{ 
    width: 200px; 
    margin: 0 auto; 
    position: relative; 
} 

.sideCol 
{ 
    width: 10000%; 
    height: 100%; 
    position: absolute; 
} 

#left 
{ 
    background-color: red; 
    right: 200px; 
    top: 0; 
} 

#right 
{ 
    background-color: blue; 
    top: 0; 
    left: 200px; 
}

http://jsfiddle.net/fLH9T/

출처

2012-12-10 16:06:26 pbaehr

HTML

<div class="left"></div> 
<div class="center"></div> 
<div class="right"></div>

CSS

.left { float:left; width:33%; height:200px; z-index:100; diplay:block; } 
.center { float:left; width:33%; height:200px; z-index:1; diplay:block; } 
.right { float:right; width:33%; height:200px; z-index:100; diplay:block; }

나는 이것이 당신이 원하는 것입니다 가정합니다.

출처

2012-12-10 15:55:26 Ladineko

은 33 % 대신'32.8 %'또는'32.7 %'를 사용합니다. –

@Mr. 외계인 : 왜 그게? – iappwebdev

OP는 고정 폭 중간 열을 원했습니까? –

너비가 세 열

답변

관련 문제