自舉井底部的定位按鈕

嗨，所以我在按鈕定位時遇到了問題。我需要按鈕位於井底，但不知何故，我似乎無法將其定位在那裏。自舉井底部的定位按鈕

這裏是發生了什麼：該按鈕在圖像的側面結束了，但我需要的是在井的底部

這裏是我的代碼：

<div class="container"> 
<h2 class="center">CTTS Data</h2> 
    <div class="row"> 
    <div class="col-md-12 col-sm-12" id="CTTSData"> 


    <script> 
    $.ajax({ 
     url : "CR_Data/CTTS_Data.json", 
     type : "post", 
     contentType:"application/json", 
     success : function(list){   
      var divCol = "<div class='col-sm-4 col-md-4'>"; 
      var divWell = "<div class='well' style='position:relative'>"; 
      var divClose = "</div>"; 

      console.log(list); 

      list.forEach(function(obj, index) { 

      //console.log(obj); 

      var title  = "<h5>"  + obj.title + "</h5>"; 
      var linkStart = "<a href='" + obj.imagePath + "' target='_blank'>" ; 
      var image  = "<img class='thumbnailSmall' data-toggle='tooltip' data-placement='left' title='Click to open data' src='" 
           + obj.imagePath + "' height='100%' width='100%'/>" 
      var linkEnd = "</a>"; 
      var linkFile = "<a class='btn btn-danger' id='btnView' href='" + obj.filePath + "'>Open File</a>"; 

      var div = divCol + 
      divWell  + 
      title  + 
      // desc  + 
      linkStart  + 
      image  + 
      linkEnd + 
      linkFile + 
      divClose + 
      divClose; 

      $("#CTTSData").append(div); // insert the div you've just created 

      }) 
     } 
    }); 
    </script> 


    </div> 
    </div> 

</div> 
<!-- /.container -->

CSS：

#btnView{ 
position: absolute; 
margin-bottom: 20px; 
}

來源

2017-06-29 nurul98

嘗試刪除'position' CSS屬性。並確保按鈕正在井內聲明。如果按鈕確實在井內，但仍不在您想要的位置，請添加'position'屬性，但將其設置爲'relative'。 –

我會附上一個自舉「行」容器內的按鈕，像這樣：

var divCol = "<div class='col-sm-4 col-md-4'>"; 
 
var divWell = "<div class='well'>"; 
 
var divClose = "</div>"; 
 

 
var title  = "<h5> title </h5>"; 
 
var linkStart = "<a href='#' target='_blank'>" ; 
 
var image  = "<img class='thumbnailSmall' data-toggle='tooltip' data-placement='left' title='Click to open data' src='path' height='100%' width='100%'/>" 
 
var linkEnd = "</a>"; 
 
var linkFile = "<div class='row'><a class='btn btn-danger' id='btnView' href='#'>Open File</a></div>"; 
 

 
var div = divCol + divWell + title + linkStart + image + linkEnd + linkFile + divClose + divClose; 
 

 
$("#CTTSData").append(div); // insert the div you've just created

#btnView{ 
 
    margin-top: 20px; 
 
    margin-left: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h2 class="center">CTTS Data</h2> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-sm-12" id="CTTSData"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- /.container -->

來源

2017-06-29 02:06:30

自舉井底部的定位按鈕

回答

相關問題