html - css 底部属性工作奇怪

Question

我知道我遗漏了一些简单的东西，但我不知道到底是什么

HTML:

<div class="form-captions">
  <div class="form-text">
    Caption
  </div>
  <div class="form_error" style="display: block;">
    sfgsdfg
    asdf safgsafdgsdfgsdfgsdfghsdfhsdghs
    asfdasssssssssssssssssssssssssssssssssssssssssssssssssss
    sssssssssssssssssssssssssssssssssssssssfgsdf
  </div>
  <div class="clearfix"></div>
</div>

CSS:

.clearfix{
  clear: both;
}
.form-captions {
    width: 100%;
    height: auto;
    display: block;
    clear: both;
    padding-top: 20px;
    min-height: 20px;
    position: relative;
}

.form-text {
    width: 100px;
    font-size: 16px;
    height: 20px;
    color: rgb( 29, 29, 29 );
    text-align: left;
    position: relative;
    float: left;
    clear: left;
    bottom: 0;
}

.form_error {
    color: darkred;
    float: right;
    display: none;
    margin-left: 5%;
    width: 65%;
}

对于表单文本 block ，底部不是从表单标题 block 的底部开始工作的(与“顶部:0;”相同的位置)。但它会起作用并对值变化使用react。

jsfiddle

我怎样才能让它从底部开始工作，或者我怎样才能将这个 block 的文本移动到“表单标题”的底部？

谢谢

Answer 1

如果我理解你的问题，我找到的解决方案是基于 display:table 描述的解决方案 here

在 form-caption 中，我添加了 display:table-row，而在 form-text 中，我删除了所有 fide sizes 并使其显示为 table-cell。

.clearfix{
  clear: both;
}
.form-captions {
    width: 100%;
    height: auto;
    display: table-row;
    clear: both;
    padding-top: 20px;
    min-height: 20px;
    position: relative;
}

.form-text {
    
    font-size: 16px;
   
    color: rgb( 29, 29, 29 );
    text-align: left;
    
    display: table-cell;
    bottom: 0;
}

.form_error {
    color: darkred;
    float: right;
    display: none;
    margin-left: 5%;
    width: 65%;
}

<div class="form-captions">
<div class="form-text">
                        Caption
                    </div>
                    <div class="form_error" style="display: block;">sfgsdfg
                    asdf safgsafdgsdfgsdfgsdfghsdfhsdghs
asfdasssssssssssssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssssfgsdf</div>
<div class="clearfix"></div>
</div>