html - Form Div中断父div并换行

我真的需要您的帮助。对于我的一生，我无法开始理解为什么我似乎无法使表格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>

最佳答案

通过将float:right添加到表单容器div中，我将其放置在正确的容器中

小提琴-http://jsfiddle.net/90777hu9/

关于html - Form Div中断父div并换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34071751/