如何將div內容設置爲其父級底部的底部？

問題：我需要將標籤「THIS BUTTON」放在其父div的底部。如何將div內容設置爲其父級底部的底部？

如何修復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>

來源

2014-03-07 Ras

您在jsfiddle中的代碼與屏幕截圖中的代碼不匹配 – SamotnyPocitac

確實會讓您的視口變大... – LinkinTED

我再次複製並粘貼它，它現在應該一樣。 – Ras

您可以設置position: relative;父DIV。

然後在孩子的div

來源

2014-03-07 14:34:58

我試過了，它不起作用。我有一個面板div。這個div包含一個主要的div。主div有左側和右側div內容。在主分區下，我正在設置相對位置。之後，我將左側div設置爲absoulte和bottom 0.但它不起作用。 – Ras

你需要使用CSS position:relative到div容器，並position:absolute;bottom:0;你的按鈕設置position:absolute; bottom:0;，所以按鍵會去你的容器的底部。

來源

2014-03-07 14:35:07 Sharky

我試圖設置absoulte按鈕的CSS。這是行不通的。我試圖給按鈕容器div absoulte。沒有改變。 – Ras

如何將div內容設置爲其父級底部的底部？

回答

相關問題