HTML DIV COLUMN

-1

私のHTMLコードwithとfloatがページを列形式に分割できない理由を尋ねたいと思います。私はすでにフロートを使用しています。私は他の人がページをコラムに分割するために同様のことをコードしているのを見ました。しかし、なぜこの方法ではうまくいかないのですか。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; 
    }

出典

2017-05-29 Ka Long Or

あなたのHTMLはすべて無効なものです。「」とは何ですか？ '、body'タグはどこにありますか？ HTMLを ' 'に入れることはできません。まずHTMLを検証します。 – j08691

でも、それらを修正してください。私はそれがまだ動作していないことがわかります。 –

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

：浮動要素のための両方。

出典

2017-05-29 17:22:50

私はクリアを使用しています：フローティング要素の両方。しかし、それも動作しません –

あなたはコードを共有できますか？ –

私の質問に私のコードを掲載しました。私はHTMLの初心者です。だから、あなたは愚かな間違いのために私を許してくれることを願っています。 –

答えて

関連する問題