2017-05-29 23 views
-1

我想問爲什麼我的HTML代碼和浮動不能將頁面分成列形式。我已經使用過float.I已經看到其他人編寫類似的東西來分頁到列。但是爲什麼它沒有這樣的成功。是否有任何錯誤。HTML DIV COLUMN

這是我的HTML文件。

<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> 

這是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

您的HTML是各種無效的。什麼是''?你的身體標籤在哪裏?你也不能把HTML放在''中。首先驗證您的HTML。 – j08691

+0

但即使不正確他們。我發現它仍然不起作用。 –

回答

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代碼:

#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; 
} 

你不使用明確:既爲浮動元素。

+0

我已經使用clear:既用於浮動元素。但它也不起作用 –

+0

你能分享代碼嗎? –

+0

我在我的問題中發佈了我的代碼。我是HTML的初學者。所以希望你能原諒我的愚蠢錯誤。 –