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

对于表单文本块底部不是从表单标题块的底部（相同位置“与顶部：0;”）。但它会起作用并对价值变化做出反应。

jsfiddle

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

谢谢

Answer 1

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

在 form-caption 中我添加了 display:table-row，而在 form-text 中我删除了所有 fide 大小并使其显示为 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>

Answer 2

也许你可以试试这个 -

.clearfix {
  clear: both;
}

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

.form-text {
  width: 100px;
  border:1px solid red;
  font-size: 16px;
  height: 20px;
  color: rgb( 29, 29, 29);
  text-align: left;
  position: absolute;
  float: left;
  clear: left;
  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>

Answer 3

你为什么不只使用边距？

.form-text {
    margin-top: 20px; 
}

Answer 4

我已经更新了你的 JsFiddle https://jsfiddle.net/RajReddy/181Lky0n/2/ 。如果这就是你要找的，请告诉我。此外，这些变化只是增加了 div 的宽度。

.form_error {
    color: darkred;
    float: right;
    display: none;
    margin-left: 5%;
    width: 100%; // this is the change
}

编辑：这里是更新后的JsFiddle，结果是