如何将div内容设置为其父div的底部？

Question

问题：我需要在其父div的内容底部放置带有“THIS BUTTON”标签的按钮。

如何将div内容修复到其父级的底部？

问题屏幕链接：Problem Screen

这是我的代码jsfiddle链接：JSFiddle

   .activity-default {
    border-width: 1px;
    border-style: solid;
    border-color:black;
    border-left-width: 2px;
    border-left-style: inset;
    border-left-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: lavender;
    border-bottom-left-radius: 20;
    padding-bottom: 1px;
    margin-top: 0px;
    /*border-width: 1px;
    border-style: solid;*/
}

.activity-default:hover {

    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: lightseagreen;

}



.activity-content-seperator {
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: greenyellow;
    width: 100%;
}

.activity-button-bottom-fitter {
    height: 100%;
}

.dropdown-menu-filter {
    font-family: verdana, arial;
    font-weight: normal;
    padding: 5px 10px 0;
    max-height: 300px;
    overflow-y: scroll;

}


/* Comments */
.comment-time {
  font-size: 12px;
  color: #656565;
  padding-right: 10px;
}

.comments {
  padding-top: 20px;
}

.comment {
  margin-bottom: 10px;
  }
}

<div class="panel panel-default">
                <div class="panel-heading">Başlık </div>
                <div class="panel-body">
  <div class="col-lg-12 activity-default">

                        <div class="col-lg-12">

                            <div class="row comment-title">
                                <span class="glyphicon glyphicon-comment"></span><b>Title</b>
                            </div>
                            <div class="row comment-content">

                                <div class="col-lg-2">
                                    <div class="row">A.B.</div>
                                    <div class="row">10.03.2014</div>
                                    <div class="row">19:21</div>


                                    <div class="row">
                                        <button id="mybutton" class="btn btn-md btn-default" style='margin-bottom: 1px; margin-right: 2px; white-space: normal;'><span class="glyphicon glyphicon-flag text-red"></span>THIS BUTTON</button>
                                    </div>


                                </div>
                                <div class="col-lg-10">

                                    <div class="row col-lg-12 activity-content-seperator">
                                        <div class="row col-lg-12">
                                            <h5>Title</h5>
                                        </div>
                                        <div class="row col-lg-12">
                                            <p>
                                                Some notes here some notes here lorem ipsum etc 
                                            </p>
                                            <ul>
                                                <li>Elem1</li>
                                                <li>Elem1</li>
                                                <li>Elem1</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

</div>
            </div>
        </div>
    </div>

Answer 1

您可以在父div上设置position: relative;。

然后在子div上设置position:absolute; bottom:0;

Answer 2

您需要将css position:relative用于容器div，并将position:absolute;bottom:0;用于您的按钮，因此按钮将转到容器的底部。