Erstellen einer Website mit 3 div mit Center-Inhalt und 2 "Puffer", um den reminig horizontalen Raum zu füllen

Ich mache eine CSS-Website und ich möchte so aussehen: 3 vertikale divs. LINKE MITTE RECHTS. In der Center div ist der Inhalt der Website, und ich möchte die links und rechts Div den Raum zwischen dem Zentrum und den Browser Grenzen zu füllen.Erstellen einer Website mit 3 div mit Center-Inhalt und 2 "Puffer", um den reminig horizontalen Raum zu füllen

Hier ist mein Code.

#container 
{ 
width:100%; 
background-color:#000; 
} 
.center 
{ 
width:1000px; 
height:400px; 
background-color:#F90; 
margin: 0px auto; 
overflow: auto; 
} 
.spacer-left 
{ 
width:100%; 
height:400px; 
background-color:#F90; 
float:left; 
} 
.spacer-right 
{ width:100%; 
height:400px; 
background-color:#F90; 
}

Und hier ist der HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>Untitled Document</title> 
<link href="css.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id="container"> 
<div class="spacer-left"></div> 
<div class="center" style="background-color:#F30;"></div> 
<div class="spacer-right"></div> 
<div style="clear:both"></div> 
</div> 
</body> 
</html>

Ich habe mit 2 divs versuchen und es war kein Problem. Links mit Float: links und Breite in Pixeln und rechts mit 100% Breite ohne Float. Es funktionierte. Aber wie man es mit 3 Divs macht. Danke im Voraus!

Quelle

2010-11-19 Victor

Danke für die Hilfe Sebastian, aber ich andere Art und Weise herausgefunden. So sieht der Code nun aus und es funktioniert.

#container 
{ 
    width:1000px; 
    background-color:#000; 
    margin:0 auto; 
} 
.center 
{ 
    width:100%; 
    height:400px; 
    background-color:#F90; 
    margin: 0px auto; 
    overflow: auto; 
} 
.spacer 
{ 
    width:50%; 
    height:400px; 
    background-color:#F90; 
    float:left; 
} 
.head_warp 
{ 
    width:100%; 
    display:block; 
    height:400px; 
    margin:0 auto; 
    padding:0; 
    position:absolute; 
    top: 0; 
    left: 0; 
    text-align:center; 
    z-index:-9999; 
}

und die HTML-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>Untitled Document</title> 
<link href="css.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div class="head_warp"> 
<div class="spacer"></div> 
<div class="spacer" style="background-color:#F06"></div> 
</div> 
<div id="container"> 
<div class="center" style="background-color:#F30;"></div> 
</div> 
</body> 
</html>

Vielen Dank für die Hilfe eines wieder. Ich werde hier nochmal schreiben, wenn es ein Problem mit meiner Lösung gibt.

Quelle

2010-11-19 14:46:17 Victor

groß Victor, Sie sollten upvote und Antworten annehmen, wenn das Problem gelöst ist. –

Wie das geht, weil ich das System hier nicht kenne. – Victor

Update: eine andere Alternative zu der Antwort unten, mit drei Divs und Z-Index.

http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/

wenn Sie eine Website mit dem Inhalt in der Mitte div versuchen zu machen, können Sie das Layout mit replizieren einfach:

<body> 
    <div class="center">center</div> 
</body>

mit der CSS:

html {height: 100%; } 
.center { width:750px; margin: 30px auto; height: 100%; }

hier mitspielen: http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/

von th Die Klassennamen .spacer_left und .spacer_right ich nehme an, dass diese divs leere Abstandhalter sind und nicht notwendig.

dies ist eine gute Ressource für Layouts Basis CSS: http://www.csseasy.com/

Quelle

2010-11-19 11:18:00

Ich möchte Hintergrundbilder in die .spacer_left und .spacer_right legen, warum ich es so will. – Victor

Sie können einen Hintergrund auf das body-Tag selbst setzen, da die Breite des Inhalts eine feste Breite hat, können Sie ein einzelnes Bild für beide Hintergrund verwenden und es einen mittleren Hintergrundanhang geben. –

Vielen Dank für den Rat, aber ich weiß das. Ich möchte, dass der Hintergrund x wiederholt, um den Raum zu füllen, der die Auflösung des Benutzerbildschirms hat. – Victor

Erstellen einer Website mit 3 div mit Center-Inhalt und 2 "Puffer", um den reminig horizontalen Raum zu füllen

Antwort

Verwandte Themen