Layout 直线中的div-与底部对齐_Layout_Html_Positioning

Layout 直线中的div-与底部对齐

layout html

Layout 直线中的div-与底部对齐,layout,html,positioning,Layout,Html,Positioning,我在表格中的div定位有问题。我的页面包含一张纸。具有如下所示的div布局在左侧的div中，有字段的描述。（它们共享同一样式类）在右侧的div中，有字段。（它们共享同一样式类）验证后，我的页面如下所示： div_on_left{ clear: both; float: left; width: 440px; padding-top: 5px; padding-bottom: 8px; } div_on_right{ float: left; wi

我在表格中的div定位有问题。我的页面包含一张纸。具有如下所示的div布局

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

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

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;
}

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

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;
}

老实说，对于一个白人来说，我在想该怎么办，我也不知道该怎么办。我的页面几乎准备好了，所以我想以低成本解决这个问题

[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>


一行
{
位置：相对位置；
}
左边
{
字体大小：100%；
位置：绝对位置；
左：0px；
底部：0px；
}
.对
{
字体大小：200%；
位置：相对位置；
左：150px；
底部：0px；
}
左1
对
左2
对
左图3
对

这一定是一个常见的问题。如何处理宽度表单和字段框上的验证？

有一个解决方案，但它涉及一个

表格单元格

布局。布局必须有一行和两个与底部对齐的内部单元格。下面是一个JSFIDLE示例：

我不知道您需要哪种浏览器支持，但这里有关于这件事的更多信息：

我刚刚在主要帖子中添加了。