Question

我的表格中有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>

这是一个常见的问题。你如何处理宽度表单与在字段框上显示的验证？

Answer 1

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

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

排成一排 - 与底部对齐

1 个答案: