drei Spalten Flüssigkeit Layout

Sie können kopieren & fügen Sie die folgenden Markup und CSS, um den Effekt zu sehen.drei Spalten Flüssigkeit Layout

Das Problem existiert in der "Fußzeile" Teil.

Jetzt sind "Spalte1" und "Spalte3" absolut positioniert.

Es funktioniert nur, wenn "column2" am höchsten ist.

Wie kann die "Fußzeile" nicht unter allen Bedingungen mit Spalte1 ~ Spalte3 verschachtelt werden?

Markup:

<body> 
<div id="mainwrap"> 
<div id="header"><p>A fluid-width faux-columns example</p></div> 
<div id="contentarea" class="clearfix"> 
<div id="contentarea2" class="clearfix"> 

<div id="column2"> 
<p>This layout uses absolute/relative positioning to position the side columns within 
their respective faux columns containers.</p> 
<p>You can control the maximum and minimum widths of the fluid center area. 
Once the layout reaches its maximum width, it centers itself in the browser as the window 
gets wider.</p> 
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus 
    mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse 
    consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis 
    fermentum purus.</p> 
    <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales, 
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna. 
    Nunc mattis congue leo.</p> 
</div><!--end column2--> 
<div id="column1"> 
<ul> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
</ul> 
</div><!--end column1--> 
<div id="column3"> 
<p>This template uses the Alsett clearing method.</p> 
</div><!--end column3--> 
</div><!--end contentarea2--> 
</div><!--end contentarea--> 
<div id="footer">This is the footer</div> 
</div><!--end mainwrap--> 
</body>

css:

body {font: 1.0em verdana, arial, sans-serif; 
    text-align:center; 
    } 
* {margin:0; padding:0;} 
div#mainwrap {min-width:780px; max-width:960px; 
    margin-left:auto; margin-right:auto; 
    text-align:left; 
    } 
div#header {height:32px; background-color:#CAF; text-align:center;} 
div#contentarea { background-color:#FFF; 
    background:url(images_pres/faux_left.gif) repeat-y top left; 
    position:relative; 
    } 
div#contentarea2 {background-color:#FFF; 
    background:url(images_pres/faux_right.gif) repeat-y top right; 
    position:relative; 
    } 
div#column1 {width:150px; 
    position: absolute; 
    top:0px; left:0px; 
    background-color:#CCC; 
    overflow:hidden; 
    } 

div#column2 {background-color:#FFF; 
    margin:0 170px 0 150px; 
    } 
div#column3 {width:170px; 
    position:absolute; 
    top:0px; right:0px; 
    background-color:#DDD; 
    overflow:hidden; 
    } 
div#footer {background-color:#FAC; text-align:center; padding-top:6px;} 

div#column1 ul {margin: 20px 0 0 26px;} 
div#column2 p {font-size:.8em; margin:0 30px 1em ;} 
div#column3 p {margin: 20px 10px 0 10px;}

Quelle

2009-07-16 omg

Das gehört auf doctype.com – CarlG

Sie in nur css Kann nicht. Wenn Sie Ihre Spalten auf diese Weise positionieren, sind sie nicht mehr Teil des Dokumentenflusses. Nicht einmal klar: beides wird sich auswirken.

Sie könnten Ihrer mittleren Spalte eine Mindesthöhe geben, wenn Sie die Höhe der Seitenspalten kennen, oder Sie könnten Javascript verwenden, um die größte Höhe zu berechnen. Oder Sie könnten die Seitenspalten schweben lassen, aber das würde eine bestimmte Reihenfolge der Blöcke im HTML vorgeben.

Quelle

2009-07-16 20:23:35 jeroen

einfache Art und Weise ist ein Schwimmer zu tun: links an allen drei Zentrum divs, verwenden Sie dann

<div style="clear:both;">&nbsp;</div>

Es gibt Dutzende von Beispielen, die im Internet sehen 960 Grid System ist ein großer Rahmen für so etwas.

Sie sollten, wenn möglich, absolute Positionierung vermeiden.

Quelle

2009-07-16 21:20:08 Davin

Column1 und Colum3 mit fester Breite, während column2 ist flexibel. kann das erreichen Mit Float? – omg

http://www.alistapart.com/articles/holygrail/ hat ein fantastisches Tutorial, wie man das erreicht. – Davin

können Sie auch die mit Fluid 960 Framework

Quelle

2009-07-17 19:44:34 pegasus4747

Ersetzen Sie den Code betrachten:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<link href="Styles/Copy%20of%20Site.css" rel="stylesheet" type="text/css" /> 
<body style="height:335px;"> 
<div id="mainwrap"> 
<div id="header"><p>A fluid-width faux-columns example</p></div> 
<div id="contentarea" class="clearfix"> 
<div id="contentarea2" class="clearfix"> 

<div id="column2"> 
<p>This layout uses absolute/relative positioning to position the side columns within 
their respective faux columns containers.</p> 
<p>You can control the maximum and minimum widths of the fluid center area. 
Once the layout reaches its maximum width, it centers itself in the browser as the window 
gets wider.</p> 
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus 
    mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse 
    consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis 
    fermentum purus.</p> 
    <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales, 
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna. 
    Nunc mattis congue leo.</p> 
</div><!--end column2--> 
<div id="column1"> 
<ul> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
</ul> 
</div><!--end column1--> 
<div id="column3"> 
<p>This template uses the Alsett clearing method.</p> 
</div><!--end column3--> 
</div><!--end contentarea2--> 
</div><!--end contentarea--> 

</div><!--end mainwrap--> 
<div id="footer" style="vertical-align:bottom;margin-top:100px;">This is the footer</div> 
</body>

Quelle

2013-02-02 10:54:59

drei Spalten Flüssigkeit Layout

Antwort

Verwandte Themen