行中的 div - 对齐到底部答案

【问题标题】：Divs in line - align to bottom行中的 div - 对齐到底部
【发布时间】：2023-03-31 06:08:01
【问题描述】：

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

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

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

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

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

[编辑1]：我当前的 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;
}

[编辑2]：我刚刚找到了一个解决方案（发布在下面），但我不喜欢它。如果左侧 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>

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

【问题讨论】：

我刚刚在主帖中添加了。

标签： layout html positioning

【解决方案1】：

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

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

【讨论】：