CSS 3 열 플로트 (고정 2, 동적 1)

3 부분으로 구성된 헤더를 디자인하고 있습니다.CSS 3 열 플로트 (고정 2, 동적 1)

페이지 유체이어야합니다 min-width:940px; max-width:1200px;

헤더의 처음 두 부분이 해결 될 것입니다 크기 :

left  middle  right 
<---------><---------><-----------------> 
    134px  183px  (Fill the remaining space)

나는 페이지의 크기에 따라 변경하려면 오른쪽 싶습니다 , 나는 지금까지 가지고있는 것을 붙여 넣을 것이지만, 내 문제는 그것을 완전히 채우고있다.

HTML :

<div class="main"> 

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

CSS : 나는 의견을 충분히 평판이없는

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { float: left; width: 183px; height: 191px; background-color:#ffff00; } 
div.right { height: 191px; background-color: #ff0000; margin-left: 317px; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div> 
</div> 
</body> 
</html>

출처

2009-07-18 Anonymous

헤더 또는 페이지의 나머지 부분에 간격을 채우시겠습니까? – random

이 시도 의 정확성을 보증하기 위해 이전 답변. 다음과 같이 그래서 불통, 고정 액체 고정 : 나는 조금 다른 뭔가를 찾고 있었다

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { height: 191px; background-color: #ff0000; margin-left: 134px; margin-right: 183px;} 
div.right { float: right; width: 183px; height: 191px; background-color:#ffff00; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="right"></div> 
<div class="middle"></div> 
</div> 
</body> 
</html>

요점 통지 : - 마진, 플로트로, 가장자리에 중복 몸을 방지하는 데 사용됩니다. - 제 경우에는 div에서 div의 순서를 뒤집어 야합니다. 실제로 "중간"에 div가 필요하지 않습니다. 하나의 사이트는 quirksmode 블로그입니다 (단지 "body"요소에 직접 여백을 설정합니다) : http://www.quirksmode.org/blog/archives/browsers/index.html

출처

2009-07-18 10:45:39 cletus

자리에, 대단히 감사합니다! –

코덱스 : http://codepen.io/clouddueling/pen/wyIcC –

,하지만 난 그냥 원 :

.main{ 
     margin:auto; 
     min-width:940px; 
     max-width:1200px; 
     background-color:#000; 
    } 

    .left{ 
    float: left; 
    width: 134px; 
    height: 191px; 
    background-color:#0000ff; 
    } 
    .middle{ 
    float: left; 
    width: 183px; 
    height: 191px; 
    background-color:#ffff00; 
    } 

    .right{ 
    float: left; 
    width: 60%; 
    height: 191px; 
    background-color:#ff0000; 
    }

출처

2010-10-19 05:29:32

CSS 3 열 플로트 (고정 2, 동적 1)

답변

관련 문제