我正在制作一个网页,我试图在其中安排 4 个 div 区域。
- 输入 - 用户可以在此处以表单形式输入数据
- output - 输出将显示在这里(来自 php 的回显)
- sumbit - 包含可用于提交表单数据的提交按钮
- 保存 - 此部分包含一个保存按钮,可用于保存\通过电子邮件发送输出部分数据
我正在使用下面的代码来创建 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,您将看到问题
最佳答案
如果你想在 .input
下显示 .submit
always,在 上使用
。 clear:both
>.提交
fiddle :http://jsfiddle.net/Qpc6F/1/
(顺便说一下,我在 .output
上使用了 display:none
来产生空内容的效果。在您的代码中将其删除。)
关于css - 使用 CSS 正确对齐 HTML DIV 部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17951875/