0

我的表单中的 div 定位有问题。我的页面包含一张纸。使用 div 布局如下。

在左侧的 div 中，有字段的描述。（它们共享相同的样式类）在右侧的 div 中，有字段。（他们共享相同的样式类）

验证后我的页面如下所示：

但我希望它看起来像这样：

老实说，我想如何处理它，对于一个白人来说，我根本不知道该怎么做。我的页面几乎准备好了，所以我想以低成本解决这个问题。

[edit1]：我当前的 css 看起来很简单，如下所示：

div_on_left{
   clear: both;
   float: left;
   width: 440px;
   padding-top: 5px;
   padding-bottom: 8px;
}
div_on_right{
   float: left;
   width: 500px;
   padding-top: 3px;
   padding-bottom: 6px;
}

[edit2]：我刚刚找到了一个解决方案（发布在下面），但我不喜欢它。如果左侧 div 的上下文太大，它将崩溃。那是由于

位置：绝对；

所以我想避免这个属性。

<html>
<head>
<style type="text/css">
.row
{
position:relative;
}
.left
{
font-size:100%;
position:absolute;
left:0px;
bottom:0px;
}
.right
{
font-size:200%;
position:relative;
left:150px;
bottom:0px;
}
</style>
</head>
<body>
<div class="row">
<div class="left">Left_1</div>
<div class="right">Right_1</div>
</div>

<div class="row">
<div class="left">Left_2</div>
<div class="right">Right_2</div>
</div>

<div class="row">
<div class="left">Left_3</div>
<div class="right">Right_3</div>
</div>
</html>

它必须是一个普遍的问题。您如何处理出现在字段框上的带有验证的宽度表单？

4

1 回答 1

0

您的问题有一个解决方案，但它涉及table-cell布局。布局必须有一行和两个与底部对齐的内部单元格。这是一个 JSFiddle 示例：http: //jsfiddle.net/cvbLC/

我不知道您需要哪种浏览器支持，但这里有更多关于这个问题的信息：http ://www.quirksmode.org/css/display.html

于 2012-12-20T23:51:02.807 回答