Question

我在定位表列的内容时遇到问题。目前有三个内容：2个大内容和一个小内容。小的应始终位于列的底部，其他位于顶部。大内容和小内容之间可能存在很大差距，因为它也受到其他列也很大的影响。

所以，目前它看起来像这样：https://jsfiddle.net/LLx716d4/

已更新（可见小内容不在列的底部）：https://jsfiddle.net/oe34tLbd/8/

错误：

但是顶部的小内容应该在其他内容之下。我怎样才能做到这一点？
第二列由第一列覆盖。我怎么办，这不会发生？
还有一个javascript，它扩展了表格上方的字段。在某些争论中，这一运动也会移动绝对定位的内容......

我很感激你的帮助。

.cshtml

 //Part that is changed by javascript
    <h3 class="info">Information</h3>
            <div class="hide">
              large Content
            </div> 

 //Part that should stay the same no matter, if the Informations are expanded or not
 <table>
 @foreach (var item in Model) {
 {

  <tr class="Content_table">
   <td class="Content_Column">
       <div class="Content_all">
       <div class="History">large Content 1</div>             
       <div class="updated">large Content 2</div>
       </div>
       <div class="Updater"> small Content 1</div>
   </td>

   <td>
        other columns with also large Content
   </td>
  <tr>
}
</table>

的CSS

/*table design
----------------------------------------------------------*/
.Content_table {
    background-color:white;
    border-bottom:solid thin #808080;
    padding-bottom:0; 
    vertical-align:top;
}

.Content_Column {
    padding: 0px 10px 0px 0px;
    position:relative;
    display: inline-block;
}

 .Content_all {
    position:absolute;
    top:0;
    display: inline-block;
}

 .History {
     background-color:#d0d0d0; 
     padding:5px; 
     white-space: pre-wrap;    
     word-break: normal; 
     position:relative;
 }

 .updated {
     padding:5px; 
     white-space: pre-wrap; 
     word-break: normal; 
     background-color: white;
     position:relative;
 }

 .Updater {
     font-size:xx-small;
     float:left;
     padding:5px 0 0 5px; 
     position:absolute;
     bottom:0;
  }

的javascript

$(document).ready(function () {
            $('.hide').hide();
            $('.info').show();

            $('.info').hover(function () {
                $('.hide').show("blind");
                //$('#Button1').hide();
            });

            $('.hide').mouseleave(function () {
                $('.hide').hide("blind");
                //$('#Button1').show();
            });

        });

将三个div放在一列中，位置不同（顶部和底部），不会覆盖

0 个答案: