Form Div打破父div和换行

时间：2015-12-03 16:53:39

标签： html css html5 css3

我真的需要你的帮助。对于我的生活，我无法理解为什么我似乎无法将我的表格DIV正确放置在我的2列布局的右侧。

见下图： enter image description here

这是HTML＆amp;有问题的CSS：

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

这是因为你float box4离开了，但你没有float box5。所以它仍然在文档的流程中并被推到浮动的左下方。

答案 1 :(得分：0)

将float:left和width: 78%;添加到.box5在代码段中按完整页按钮即可查看

＆＃13;
＆＃13; 
* {
  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;
  float:left;
  width: 78%;
}
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我通过将float:right添加到表单容器div

来让它坐在正确的容器中

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

相关问题
最新问题