Wie kann ich einige Divs in der folgenden Anordnung einrichten?

Ich habe ein Hauptcontainer div in der Mitte meiner Webseite. Dies ist bereits vorhanden und enthält verschiedene Elemente.Wie kann ich einige Divs in der folgenden Anordnung einrichten?

Allerdings versuche ich jetzt ein großes Inhalts-Div (Div # 1) auf der linken Seite, die etwa 70% der Hauptcontainer Div nimmt. Was ich habe Schwierigkeiten, tut das CSS richtig hinzubekommen 1 Div das # mit, # 2, # 3 und # 4 wie das folgende Bild angeordnet:

alt text

Was soll ich in diesem Fall tun für CSS bezüglich Div # 1 - # 4? Soll ich Div Nr. 1 nach links schweben lassen und als Prozentsatz/feste Breite einstellen? Und float divs # 2 - 4 oder?

Einige Anleitung mit diesem würde geschätzt werden!

Quelle

2009-06-16 KingNestor

Ich würde sagen 2 Wrapper div "links" und "rechts" schwebte links mit korrekten Größen.

Put div 1 in der linken

Put div 2, 3 und 4 in der rechten.

Dies sollte funktionieren, wenn nicht mich

Quelle

2009-06-16 15:50:46 marcgg

Nur, dass als Code zu geben:

– Lazarus

Gah ! Verwenden Sie nicht "links" und "rechts" als ID- oder Klassenwerte! Sonst eine gute Idee. – roryf

Ich bin daran interessiert, warum nicht etwas wie links, richtig? Nicht sinnvoll genug? – merkuro

Hier ist ein funktionierendes Beispiel wissen lassen, das könnte Ihnen helfen:

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Floating</title> 
    <style type="text/css"> 
     *{ 
     margin:0; 
     padding:0; 
     } 
     .content{ 
     padding:10px; 
     margin-top:50px; 
     width:770px; 
     margin-left:auto; 
     margin-right:auto; 
     border:1px solid black; 
     } 
     .content h1{ 
     text-align:center; 
     } 

     .content h2{ 
     text-align:center; 
     } 

     .content .left{ 
     width:600px; 
     float:left; 
     border:1px solid black;  
     } 

     .content .right{ 
     width:150px; 
     float:right; 
     } 

     .content .right div{   
     margin-bottom:10px; 

     border:1px solid black; 
     } 
     .content .clear{ 
     clear:both; 
     } 
    </style> 
    <body> 
    <div class="content"> 
     <h1>Main Container Div</h1> 
     <div class="left"> 
     <h2>Div #1</h2> 
     </div> 
     <div class="right"> 
     <div><p>Div #2</p></div> 
     <div><p>Div #3</p></div> 
     <div><p>Div #4</p></div> 
     <div><p>Div #5</p></div> 
     </div> 
     <div class="clear">&nbsp;</div> 
    </div> 
    </body> 
</html>

Quelle

2009-06-16 16:00:54 merkuro

BTW. Marcgg war viel schneller und das ist im Grunde seine Idee! – merkuro

Wie kann ich einige Divs in der folgenden Anordnung einrichten?

Antwort

Verwandte Themen