Question

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

我附上了一个jpeg，表单应该看起来像一个完整版本的网站，其中注释字段与其他字段的右边对齐但是在移动设备上查看时我希望评论字段低于其他字段的领域。

因为我被建议将注释字段包装在DIV中并将其放在其余表单字段之前然后将其浮动，当我查看移动版本时，注释字段位于表单顶部而不是底部

有关如何解决此问题的任何建议？

参见CSS＆amp; 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>

enter image description here

Answer 1

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

Answer 2

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

这应该让你更接近。

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

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

然后，在更宽的视图中，将文本区域右边的div和其他字段的div放在左边。你需要为它们设置宽度......每个说49％。

您需要在此批次之后对元素使用明确的修复以清除浮动。

对齐表单字段以进行响应式布局

2 个答案: