2017-05-29 3 views
-1

Ich möchte deshalb mit meinem HTML-Code stellen und Schwimmer kann die Seite nicht in Spaltenform unterteilen. Ich habe bereits Float verwendet. Ich habe gesehen, dass andere Leute die ähnlichen Dinge für das Teilen von Seite zu Spalte codieren. Aber warum es auf diese Weise nicht erfolgreich ist. Gibt es irgendeinen Fehler.HTML DIV COLUMN

Dies ist meine HTML-Datei.

<html> 
    <head> 
     <title > 
      Test 
     </title> 
    </head> 


    <body> 
    <h1 id="center" ><I> 
    Testing 
    </I></h1> 

    <div id="left_list"> 
     <ul Type=Circle> 
      <LI>Main Page</LI> 
      <LI>Course</LI> 
      <LI>Location</LI> 
     </ul> 

    </div> 
    <div id="image"> 
     <img src="hi.png" alt="FAIL"> 
    </div> 
    <div id="image"> 
     <img src="bye.png" alt="FAIL"> 
    </div> 
    <div id="image"> 
     <img src="download.jfif" alt="FAIL"> 
    </div> 


    <LINK REL=Stylesheet TYPE="text/css" HREF="style.css"> 
    </body> 
    </html> 

Dies ist style.css

#left_list{ 
    Font-size:20px; 
    float: left; 
    width:300px; 
    margin-right:20px; 
    height:800px; 
    background-color:#00FF7F; 
    clear:both; 
    } 



    #image{ 
    float:left; 
    margin-right:20px; 
    height:800px; 
    width:400px; 
    clear:both; 


    } 

    #rightimage{ 
    float: right; 
    margin-right:20px; 
    height:800px; 
    width:400px; 
    clear:both; 

    } 

    #center{ 
    align:center; 
    } 



    body{ 
    background-color:#6495ED; 
    } 

    head{ 
    font-size:large; 
    } 
+1

Ihr HTML ist alle Arten von ungültigen. Was ist ''? Wo sind deine ', body'-Tags? Sie können auch kein HTML in die '' einfügen. Beginnen Sie mit der Validierung Ihres HTML. – j08691

+0

aber auch wenn ich sie korrigiere. Ich finde, dass es immer noch nicht funktioniert. –

Antwort

0
<div class="clearfix" id="wrapper"> 
    <div id="left_list"> 
    <ul Type=Circle> 
     <li>Main Page</li> 
     <li>Course</li> 
     <li>Location</li> 
    </ul> 
    </div> 
    <div id="image"> 
    <img src="hi.png"> 
    </div> 
</div> 

CSS-Code:

#wrapper { 
    margin-right: 200px; 
    border:2px dashed red; 
} 

#image { 
    float: left; 
    margin-right: 20px; 
    height: 400px; 
    width: 200px; 
    background: #444; 
} 

.clearfix:before, 
.clearfix:after{ 
    content:''; 
    display:block; 
    clear:both; 
} 

Sie nicht klar verwenden: sowohl für die schwimmenden Elemente.

+0

Ich habe clear verwendet: beide für Floating-Element. Aber es funktioniert auch nicht –

+0

können Sie Code teilen? –

+0

Ich habe meinen Code in meiner Frage veröffentlicht. Ich bin der Anfänger von HTML. Hoffentlich verzeihen Sie mir einen dummen Fehler. –