Fatal编程技术网

HTML DIV列

html

HTML DIV列,html,multiple-columns,Html,Multiple Columns,我想问一下，为什么我的带有和float的html代码不能将页面划分为列形式。我已经使用了float。我见过其他人编写类似的代码来将页面划分为列。但是为什么这样做不成功呢？是否有任何错误 这是我的html文件 <html> <head> <title > Test </title> </head> <body> <h1 i

我想问一下，为什么我的带有和float的html代码不能将页面划分为列形式。我已经使用了float。我见过其他人编写类似的代码来将页面划分为列。但是为什么这样做不成功呢？是否有任何错误

这是我的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>
对于浮动元素，您没有使用clear:两者。

您的HTML都是无效的。什么是
？您的
，body
标签在哪里？您也不能将HTML放入
中。从验证HTML开始，但即使我纠正了它们。我发现它仍然不起作用。我对浮动元素使用了clear:两者。但它也不起作用。我在问题中发布了我的代码。我是HTML的初学者。所以希望你能原谅我犯的愚蠢的错误。 
    #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;
    }

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

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