CSS底部poperty工程奇怪

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

如果我理解正確你的問題，我找到了解決方案基於顯示：解表描述here

在形式上字幕我添加顯示：錶行，而在外形文字我刪除所有正常尺寸，並使其顯示爲表格單元格。

.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

我已經更新您的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，結果是

Answer 3

你爲什麼不只是使用保證金？

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

Answer 4

可能是你可以試試這個 -

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