CSS 3 Spalten flüssiges Layout mit fester Mittelsäule

Ich möchte für meine Marketing-Site ein 3-Spalten-Layout machen, das Bilder im oberen Banner hat.CSS 3 Spalten flüssiges Layout mit fester Mittelsäule

Ich möchte eine Flüssigkeit links/rechts mit einer festen Mitte haben. Die html aussehen würde im Idealfall wie folgt aus:

<div id="pixelLeft">&nbsp;</div> 
<div id="bannerCenter"> 
    <img src="images/mybanner.png" /> 
</div> 
<div id="pixelRight">&nbsp;</div> 

<style> 
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; } 
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; } 
#bannerCenter { /* something here to make fixed width of 1550px */ } 
</style>

Die Bilder in der linken/rechten Pixel Seiten sind 1px x 460PX. Das Bild mybanner.png ist 1550px x 460px.

Vielen Dank im Voraus! (Vor allem, wenn es in ALLEN Browsern funktioniert!)

Quelle

2013-06-04 Adam Levitt

Ist das hilfreich?

CSS Only Demo

jQuery Demo(Cross Browser Compatible)

<div class="wrap"> 
    <div id="pixelLeft">&nbsp;</div> 
    <div id="bannerCenter"> 
     <img src="images/mybanner.png" /> 
    </div> 
    <div id="pixelRight">&nbsp;</div> 
</div> 
<div style="clear:both;"></div> 

*{ 
    margin:0; 
    padding:0; 
} 
#bannerCenter{ 
    background:#ddd; 
    width: 500px; 
    float:left; 
} 
#pixelLeft{ 
    background:#999; 
    width: calc(50% - 250px); 
    float:left; 
} 
#pixelRight{ 
    background:#999; 
    width: calc(50% - 250px); 
    float:right; 
} 

#bannerCenter,#pixelLeft,#pixelRight{ 
    height: 400px; 
}

Sie können jQuery verwenden, anstatt calc(50% - 250px); verwenden, um es für ältere Browser kompatibel zu machen.

$(document).ready(function() { 
    $(window).on('resize', function() { 
     $('#pixelLeft, #pixelRight').css('width',($('body').width()-$('#bannerCenter').width())/2); 
    }).trigger('resize');  
});

Quelle

2013-06-04 02:58:15

Das ist fantastisch nah, aber ich habe es in IE7 versucht und es ist alles nach links verschoben ... Dies ist eine sehr elegante Lösung und was ich suche. Können wir das letzte bisschen reparieren? Vielen Dank!! –

** + 1 ** Perfekt :) –

Das sieht am Anfang sicher gut aus, aber wenn ich anfange, das Fenster zu verkleinern, werden die Dinge etwas klobig. –

Es gibt mehrere Lösungen zu diesem, wahrscheinlich die populäre von denen ist die Methode des Heiligen Grals. Es ist ein wenig über meinem Kopf, aber diese Links erklären es ziemlich gut.

http://alistapart.com/article/holygrail

http://matthewjamestaylor.com/blog/perfect-3-column.htm

würde ich mit A List Apart den Artikel starten. Viel Glück.

Nach der erneuten Lektüre, ich denke, das ist das, was ich tun würde:

HTML

<div id="header"> 
</div><div id="container"> 
    <div id="center" class="column"></div> 
    <div id="left" class="column"></div> 
    <div id="right" class="column"></div> 
</div><div id="footer"></div>

CSS

body { 
    min-width: 550px;  /* 2x LC width + RC width */ 
} 
#container { 
    padding-left: 200px; /* LC width */ 
    padding-right: 150px; /* RC width */ 
} 
#container .column { 
    position: relative; 
    float: left; 
} 
#center { 
    width: 100%; 
} 
#left { 
    width: 200px;   /* LC width */ 
    right: 200px;   /* LC width */ 
    margin-left: -100%; 
} 
#right { 
    width: 150px;   /* RC width */ 
    margin-right: -150px; /* RC width */ 
} 
#footer { 
    clear: both; 
} 
/*** IE6 Fix ***/ 
* html #left { 
    left: 150px;   /* RC width */ 
}

Sie werden einige neu einstellen müssen der Dimensionen, aber die Inline-Kommentare sollten dabei helfen. So, da hast du es. Das Heilige Gral Layout.

Quelle

2013-06-04 02:50:51 micuik

Danke für den Post, aber der erste ist eigentlich rückwärts. Ich möchte das Zentrum fixieren und die Seiten flüssig halten. –

Hier ist eine gute Lösung, meiner Meinung nach die einfachste. Es sieht sauber aus und es braucht keine Wrapper div.

Demo

HTML

<body> 

<div id="left_container"> 
    <div id="left"> 
     left content 
    </div> 
</div> 

<div id="center"> 
    center content 
</div> 

<div id="right_container"> 
    <div id="right"> 
     right content 
    </div> 
</div> 

</body>

CSS

#left_container { 
    width:50%; 
    float:left; 
    margin-right:-480px; /* minus half of the center container width */ 

    /* not important */ 
    height: 200px; 
} 
#left { 
    margin-right:480px; /* half of the center container width */ 

    /* not important */ 
    background: #888; 
    height: 600px; 
} 
#center { 
    width:960px; /* size of the fixed width */ 
    float:left; 

    /* not important */ 
    color: #FFF; 
    background: #333; 
    height: 500px; 
} 
#right_container { 
    width:50%; 
    float:right; 
    margin-left:-480px; /* minus half of the center container width */ 

    /* not important */ 
    height: 300px; 
} 
#right { 
    margin-left:480px; /* half of the center container width */ 

    /* not important */ 
    height: 300px; 
    background-color: #888; 
}

genießen!

Quelle

2013-07-27 13:32:49 Armand

Große Lösung, es erfordert keine JS oder CSS3 Markup. –

Danke! Ich würde auch bemerken, dass #left_container sollte margin-left: auto, sonst wird es nach links bewegen. – liepumartins

Danke, das hat mir mit meinem mobilen Menü geholfen, funktioniert super – Scott

<body> 
 
    <div style=" width: 200px; float: left; background: red; height: 100px;">Left</div> 
 
    
 
    <div style=" float: right; width: 200px; background: red; height: 100px;">Right</div> 
 
    <div style=" background: blue; margin:0 auto; height:100px;">Center content goes here</div> 
 
</body>

ist hier einfacher Trick durch HTML und CSS nur eine solche Schichtstruktur zu tun und es wird Mittelschicht in der Mitte zu halten, auch wenn Sie Browser die Größe wird.

Quelle

2015-02-18 08:29:15 Optimus

CSS 3 Spalten flüssiges Layout mit fester Mittelsäule

Antwort

Verwandte Themen