css - 使用 CSS 正确对齐 HTML DIV 部分

Question

我正在制作一个网页，我试图在其中安排 4 个 div 区域。

1. 输入 - 用户可以在此处以表单形式输入数据
2. output - 输出将显示在这里(来自 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 即使输出中没有数据。

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

Answer 1

如果你想在 .input 下显示 .submit always，在 上使用 clear:both >.提交。

fiddle :http://jsfiddle.net/Qpc6F/1/

(顺便说一下，我在 .output 上使用了 display:none 来产生空内容的效果。在您的代码中将其删除。)