2017-02-16 2 views
-2

何が間違っていますか?ここではHTMLは次のとおりです。divsが正しく動作しない

<body> 
<div class="container"> 
<div id="header"> 
    <p id="title">PNR File Finish</p> 
</div> 
    <div id="leftside"> 
     <form> 
      <div> 
       <label for="comp_Name">Company:<br/> <input id="comp_name" type="text" value="" name="" size="30" 
                  maxlength="50"><br/><br/> 
       <label for="nick">Company Code:<br/> <input id="nick" type="text" value="" name="" size="4" 
                   maxlength="4"><br/><br/> 
       <label for="clientID">ClientID:<br/> <input id="clientID" type="text" value="" name="" size="10" 
                    maxlength="10"><br/><br/> 
       <label for="Recloc">Record Loc:<br/> <input id="recloc" type="text" value="" name="" 
                     size="10" maxlength="6"><br/><br/> 
       <p id="info">Please be sure Client Name and Client ID are correct before running File 
            Finishing!</p> 
       <a href="#" class="btn btn-primary btn-md active" role="button">Run File Finish</a> 
       <hr> 
       <a href="#" class="btn btn-primary btn-md active" role="button">Reload PNR</a><br /><br /> 
       <p id="info2">If Customer information is incorrect, reload underlying PNR</p> 
     </form> 
    </div> 
    <div id="right_box"> 

    </div> 

</div> 

</body> 

そしてここでは、CSSは次のとおりです。

body { 
    background-color: white; 
} 

.container{ 
    width: 1200px; 
    height: 800px; 
    backround-color: #FAEBD7; 
} 

#header{ 
    height: 50px; 
    background-color: darkblue; 
} 

#title{ 
    text-align: center; 
    color: white; 
    font-size: 30px; 
    padding-top: 5px; 
} 

#leftside{ 
    width: 300px; 
    float: left; 
    height: 600px; 
    border-left: 1px solid darkblue; 
    border-right: 1px solid darkblue; 
    border-bottom: 1px solid darkblue; 
    padding-top: 30px; 
    padding-left: 5px; 
    padding-right: 5px; 

} 

#right_box{ 
    width: 100px; 
    height: 600px; 
    float: left; 
    border: 1px solid darkblue; 

} 

右のボックスには、右側の代わりに、よく下の両方表示されています。私はいろいろな方法で試しましたが、それを働かせることはできません。申し訳ありませんが、かなり新しいです。どんな助けもありがとう。

+2

あなたには、おそらくその問題の原因となっているいくつかの閉じられていない要素を含む、大量のHTMLエラーがあります。 https://validator.w3.orgであなたのhtmlを検証して、それをクリアできるかどうか確認してください。 –

答えて

0

構文エラーが発生しているように見えますが、ここではクリーンアップされていて、意図したとおりに動作しています。

body { 
 
    background-color: white; 
 
} 
 

 
.container { 
 
    width: 1200px; 
 
    height: 800px; 
 
    backround-color: #FAEBD7; 
 
} 
 

 
#header { 
 
    height: 50px; 
 
    background-color: darkblue; 
 
} 
 

 
#title { 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding-top: 5px; 
 
} 
 

 
#leftside { 
 
    width: 300px; 
 
    float: left; 
 
    height: 600px; 
 
    border-left: 1px solid darkblue; 
 
    border-right: 1px solid darkblue; 
 
    border-bottom: 1px solid darkblue; 
 
    padding-top: 30px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 

 
#right_box { 
 
    width: 100px; 
 
    height: 600px; 
 
    float: left; 
 
    border: 1px solid darkblue; 
 
}
<div class="container"> 
 
    <div id="header"> 
 
    <p id="title">PNR File Finish</p> 
 
    </div> 
 
    <div id="leftside"> 
 
    <form> 
 
     <div> 
 
     <label for="comp_Name">Company:<br> 
 
\t \t \t \t \t <input id="comp_name" maxlength="50" name="" size="30" type="text" value=""><br> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <label for="nick">Company Code:<br> 
 
\t \t \t \t \t <input id="nick" maxlength="4" name="" size="4" type="text" value=""><br> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <label for="clientID">ClientID:<br> 
 
\t \t \t \t \t <input id="clientID" maxlength="10" name="" size="10" type="text" value=""><br> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <label for="Recloc">Record Loc:<br> 
 
\t \t \t \t \t <input id="recloc" maxlength="6" name="" size="10" type="text" value=""><br> 
 
\t \t \t \t \t <br></label></label> 
 
     </label> 
 
     </label> 
 
     <p id="info"><label for="comp_Name">Please be sure Client Name and Client ID are correct before running File Finishing!</label></p><label for="comp_Name"><a class="btn btn-primary btn-md active" href="#" role="button">Run File Finish</a></label> 
 
     <hr> 
 
     <label for="comp_Name"><a class="btn btn-primary btn-md active" href="#" role="button">Reload PNR</a><br> 
 
\t \t \t \t \t <br></label> 
 
     <p id="info2"><label for="comp_Name">If Customer information is incorrect, reload underlying PNR</label></p> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div id="right_box"> 
 
    <label for="comp_Name"></label> 
 
    </div> 
 
</div>

+0

あなたの迅速な対応に感謝します。私は明日これをテストする。 – user2774415

+0

@ user2774415「Run code snippet」ボタンをクリックしてレイアウトを表示します。 – Sman

0

あなたは、単に入力要素を保持しているフォームタグ内に、あなたのdivタグを閉じる逃しました。

+0

Shaunの例を使って、私はこれを動作させました。あなたの貢献に感謝します。 – user2774415

関連する問題