CSS 3 Pływak kolumny (2 stały, 1 dynamiczny)

Projektuję nagłówek, który składa się z 3 części.CSS 3 Pływak kolumny (2 stały, 1 dynamiczny)

strona musi być płynna: min-width:940px; max-width:1200px;

zostanie ustalona Pierwsze dwie części nagłówka rozmiar:

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

Chciałbym prawą część zmianie w zależności od rozmiaru strony , Wkleję to, co mam do tej pory, ale moim problemem jest wypełnienie luki całkowicie.

HTML:

<div class="main"> 

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

CSS:

.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; 
    }

Źródło

2009-07-18 Anonymous

Wypełnij lukę do nagłówka lub reszty strony? – random

Spróbuj tego:

<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>

Źródło

2009-07-18 10:45:39 cletus

miejsce na, dzięki bardzo! –

Codepen: http://codepen.io/clouddueling/pen/wyIcC –

nie mam wystarczającej reputacji wypowiedzenia się, ale chciałem zatwierdzić poprawność poprzednia odpowiedź. Szukałem czegoś nieco inny: stałe-ciecz-stałej, tak manipulowane go w następujący sposób:

<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>

Kluczowe punkty zauważyć: - marże, z pływakiem, są stosowane w celu zapobiegania ciało pokrywa się z krawędziami. - w moim przypadku musisz odwrócić kolejność elementów div w html - w rzeczywistości nie potrzebujesz elementu div dla "środka". Jedyną witryną, która nie zawiera strony jest blog quirksmode (po prostu ustawia marginesy bezpośrednio na elemencie "body"): http://www.quirksmode.org/blog/archives/browsers/index.html

Źródło

2010-10-19 05:29:32

CSS 3 Pływak kolumny (2 stały, 1 dynamiczny)

Odpowiedz

Powiązane problemy