为响应式布局对齐表单域答案

【问题标题】：Aligning form fields for responsive layout为响应式布局对齐表单域
【发布时间】：2012-04-03 10:53:12
【问题描述】：

我目前正在尝试修复我为响应式布局而构建的表单

我附上了一个 jpeg 的表单应该是什么样子的完整版网站，其中 cmets 字段与其余字段的右侧对齐，但是当在移动设备上查看时，我希望 cmets 字段低于其余字段的字段。

因为有人建议我将 cmets 字段包装在 DIV 中，并将其放在表单字段的其余部分之前，然后将其浮动到右侧，所以当我查看移动版本时，cmets 字段位于表单的顶部而不是底部

有什么建议可以解决这个问题吗？

请参阅下面的 CSS 和 HTML

<style type="text/css">
body {
background-color: #FFF;
}

#form {
width:960px;
background-color:#edf8ff;
 height:650px;
}

.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}

.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}

.gezza-comments{
width:437px;
height:300px;
}

-->
</style></head>

<body>


<div id="form">

<form action="" class="gezza-form" method="post" >
<div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />

</form>

【问题讨论】：

不，您没有附加任何 jpeg。
现在附上图片，对此感到抱歉

标签： html css forms responsive-design

【解决方案1】：

所有字段都应该有固定的宽度吗？将每一列包裹在 div 中，然后将两个 div 向左浮动并给它们一个明确的宽度。

【讨论】：

【解决方案2】：

将带有文本区域的 div 放在 HTML 中其他字段的下方。

这应该让你更接近。

然后，您还需要将每个字段/标签对包装在一个 div 中。

在移动视图上，它应该或多或少地全部到位（可能需要一点填充/边距）。

然后，在更宽的视图中，将文本区域的 div 浮动到右侧，将其他字段的 div 浮动到左侧。您需要为它们设置宽度.. 说每个 49%。

您需要在此批次之后对元素使用 clear fix 以清除浮动。

【讨论】：