Question

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

输入 - 用户可以在此处以表格
输出 - 此处将显示输出（从php回显）
sumbit - 包含一个可用于提交表单数据的提交按钮
save - 此部分包含一个保存按钮，可用于保存\电子邮件输出部分数据

我使用下面的代码来创建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，您将看到问题

Answer 1

如果您想在.submit下方显示.input ，请在clear:both上使用.submit。

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

（顺便说一句，我在display:none上使用了.output来获得空内容的效果。请在代码中将其删除。）

Answer 2

如果您仍希望在输出div上显示边框而不显示任何数据，您可以使用内容属性将 放入div中

.output:before{
    content:"\00a0";
}

Answer 3

传递最小高度：20px;`溢出：隐藏;在.output类中。 infact可以将此属性传递给每个类。

使用CSS正确对齐HTML DIV部分

3 个答案: