html - Form Div 打破父 div 并换行

Question

我真的需要你的帮助。对于我的生活，我无法开始理解为什么我似乎无法让我的表单 DIV 正确定位在我的 2 列布局的右侧。

见下图:

这是有问题的 HTML 和 CSS:

* {
  font-family: Segoe UI;
  font-size: 9pt;
}
html, body {
  padding: 0;
  margin: 0;
}
body {
  background: rgb(187,195,203);
}
.Absolute-Center {
  margin: auto;
}
#wrapper {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
#layout {
  height: auto;
  width: 900px;
  border: 1px solid rgb(112,112,112);
}
#box1 {
  background: rgb(141,155,169);
  color: #FFF;
  padding: 3px;
  font-weight: bold;
}
#box2 {
  width: 100%;
  background: rgb(240,240,240);
  border-bottom: 1px solid rgb(180,180,180);
  padding: 4px;
  box-sizing: border-box;
}
#box3 {
  width: 100%;
  border-bottom: 1px solid rgb(180,180,180);
}
#box4 {
  background: #FFF;
  float: left;
  width: 175px;
  height: 375px;
  border-right: 1px solid rgb(180,180,180);
}
#box5 {
  background: rgb(240,240,240);
  height: 375px;
}
#box7 {
  background: rgb(240,240,240);
  padding: 5px;
  text-align:center;
}
#leftcolumn {
  float: left;
}
#rightcolumn {
  border: 0;
  padding: 3px;
  text-align: center;
}
.clear {
  clear: both;
}
fieldset {
  margin: 0;
  padding: 2px;
  padding-bottom: 5px;
}

div.wrapper {
  width: 500px;
}
div.form {
  width: 100%;
  background-color: rgb(240,240,240);
  border: 1px sold #000;
  padding: 5px;
}
div.row {
  clear: both;
  padding-top: 5px;
}

div.row span.label {
  float: left;
  width: 50px;
  text-align: right;
  padding-right: 5px;
}
div.row span.formw {
  float: left;
  width: 200px;
  text-align: left;
}
div.spacer {
  clear: both;
}
span.title {
  color: rgb(70,141,180);
}
input {
  width: 150px;
  border: 1px solid #000;
}

<div id="wrapper">

  <div id="layout" class="Absolute-Center">

    <div id="box1">Application Title</div>
    <div id="box2">

      <div id="leftcolumn"></div>
      <div id="rightcolumn"></div>
      <div class="clear"></div>

    </div>


    <div id="box3">



      <!-- LEFT WINDOW PANE -->
      <div id="box4">
        <div id="menu_wrapper">
          <ul id="menu">
            <li data-show="#1">File Information</li>
            <li data-show="#2">Comments</li>
          </ul>
        </div>
      </div>

      <!-- RIGHT WINDOW PANE -->
      <div id="box5">




        <!-- CONTENT [TAB1] -->

        <div id="1" style="width: 100%;" class="hidden tab">

          <div class="form">
            <form>
              <div style="border-bottom: 1px solid #000;" class="row"><span class="title">FILE INFORMATION</span></div>

              <div class="row">
                <span><b>Date Received</b></span>
              </div>
              <div class="row">
                <span class="label">From:</span><span class="formw"><input type="text"/></span>
              </div>

              <div class="row">
                <span class="label">To:</span><span class="formw"><input type="text"/></span>
              </div>

              <div class="spacer"></div>

            </form>
          </div>












        </div>










        <!-- CONTENT [TAB2] -->					
        <div id="2" class="hidden tab"></div>



      </div>

    </div>

  </div>

</div>

Answer 1

我通过向表单容器 div 添加 float:right 使其位于正确的容器中

fiddle - http://jsfiddle.net/90777hu9/