0

我正在一个网页上尝试安排 4 个 div 区域。

  1. 输入 - 用户可以在此处以表格形式输入数据
  2. 输出 - 输出将显示在这里（从 php 回显）
  3. sumbit - 包含一个提交按钮，可用于提交表单数据
  4. 保存 - 此部分包含一个保存按钮，可用于保存\通过电子邮件发送输出部分数据

我正在使用下面的代码来创建 html：

<div class="input">

        INPUT
</div>

<div class="output">

             OUPUT
</div>

<div class="submit">

          SUBMIT
</div>              

<div class="save">

SAVE

</div>

和CSS代码：

.input{

width:45%;
float:left;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
     margin-bottom:10px;

}

.output{

width:45%;
float:right;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
    margin-bottom:10px;

}


.submit{
width:45%;
float:left;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
     margin-bottom:10px;

}

.save{

width:45%;
float:right;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;

 margin-bottom:10px;

}

如果所有div部分都有数据，则它们正确对齐。但是在这里，由于output div区域从 php 脚本获取数据（回显值），最初这里不会显示任何内容divs。因此没有正确对齐。将sumbit div占据output div区域。

我该如何解决？submit div即使输出中没有数据，我也需要坚持。

我在这里设置了一个小提琴。LINK 如果您尝试从输出 div 部分删除 OUPUT，您将看到问题

4

3 回答 3

3

如果您想.submit 始终显示在下方.input，请使用clear:bothon .submit。

小提琴：http: //jsfiddle.net/Qpc6F/1/

（顺便说一句，我已经习惯display:none了.output有空内容的效果。在你的代码中删除它。）

于 2013-07-30T16:03:22.510 回答
0

如果您仍然想在输出 div 上显示边框而不显示任何数据，您可以&nbsp;使用 content 属性在 div 内放置

.output:before{
    content:"\00a0";
}
于 2013-07-30T16:03:44.307 回答
0

通过 min-height:20px;`overflow:hidden; 在 .output 类中。事实上可以将此属性传递给每个类。

于 2013-07-30T16:12:55.657 回答