Question

我做错了什么？这是HTML：

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

}

右侧框显示在右侧和右侧，而不是右侧。我尝试了很多不同的方法，但无法让它发挥作用。对不起，相当新的。任何帮助将不胜感激。

Answer 1

您似乎有语法错误，此处已清理并（希望）按预期工作。

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>
					<input id="comp_name" maxlength="50" name="" size="30" type="text" value=""><br>
					<br>
					<label for="nick">Company Code:<br>
					<input id="nick" maxlength="4" name="" size="4" type="text" value=""><br>
					<br>
					<label for="clientID">ClientID:<br>
					<input id="clientID" maxlength="10" name="" size="10" type="text" value=""><br>
					<br>
					<label for="Recloc">Record Loc:<br>
					<input id="recloc" maxlength="6" name="" size="10" type="text" value=""><br>
					<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>
					<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>

Answer 2

您只是错过了在持有输入元素的表单标记内关闭div标记。

div表现不正常

2 个答案: