在div div底部設置div

我有一個div（懸停），它與懸停時的圖像重疊，直到現在它完美地工作。在那個div裏面我有一個文本（標題）和另一個div（細節）。 .hover div的高度是可變的，我需要把details div放在父div的底部（.hover），頂部的標題。接下來是HTML結構：在div div底部設置div

<div class="grid-item"> 
     <img class="Movieimg" src="img.jpg"> 

     <div class="hover"> 
      <div class="title">The title</div> 

      <div class="details pull-right"> 
       <a class="btn btn-danger btn-xs nzbdetails" href="" target="_self" data-toggle="tooltip" data-placement="left" title="Details"> 
        <i class="fa fa-eye" aria-hidden="true"></i> 
       </a> 
       <a href="" class="btn btn-primary btn-xs getnzb" data-toggle="tooltip" data-placement="right" title="Get NZB"> 
        <i class="fa fa-download" aria-hidden="true"></i> 
       </a> 
      </div> 
     </div> 
    </div>

而且目前的CSS是這樣一個：

.grid-item img{ 
     width:150px; 
    } 
.grid-item { 
     position:relative; 
} 
img:hover{ 
     cursor: pointer; 
     cursor: hand; 
     filter:blur(5px); 
     -moz-box-shadow: 0 0 10px #ccc; 
     -webkit-box-shadow: 0 0 10px #ccc; 
     box-shadow: 0 0 10px #ccc; 
} 

.grid-item .hover { 
     display:none; 
     position:absolute; 
     bottom:0; 
     width: 100%; 
} 

.details a{ 
     margin-bottom: 5px; 
     margin-top: 80%; 
} 

.grid-item:hover .hover { 
    display:block; 
    height: 100%; 
} 
.title{ 
    text-align:center; 
    width:calc(100% - 10px); 
    position:absolute; 
    left:5px; 
}

而且，我使用引導3，所以也許有一個類來實現這一目標？

來源

2017-02-10 Sredny M Casanova

您的代碼是['不complete']（https：//開頭的jsfiddle。淨/ websiter/tmo110w2 /）。請提供[mcve]。 –

雖然你的問題對我來說不是很清楚，但我認爲這是你無法實現的。我剛剛使用引導網格佈局來獲得適當的網格結構。我發現你的一些CSS是不必要的，所以刪除了這些塊，因爲你可以在不使用CSS的情況下達到預期的效果，相反，bootstrap網格系統應該足夠了。

除去的CSS塊

.title{ 
text-align:center; 
width:calc(100% - 10px); 
position:absolute; 
left:5px; 
} 

margin-top: 80%; 
.grid-item img{ 
    width:150px;// inserted class="img-responsive in place of it 
}

工作代碼段

.grid-item { 
 
     position:relative; 
 
} 
 
img:hover{ 
 
     cursor: pointer; 
 
     cursor: hand; 
 
     filter:blur(5px); 
 
     -moz-box-shadow: 0 0 10px #ccc; 
 
     -webkit-box-shadow: 0 0 10px #ccc; 
 
     box-shadow: 0 0 10px #ccc; 
 
} 
 

 
.grid-item .hover { 
 
     display:none; 
 
     position:absolute; 
 
     bottom:0; 
 
} 
 

 
.details a{ 
 
     margin-bottom: 5px; 
 
} 
 

 
.grid-item:hover .hover { 
 
    display:block; 
 
    height: 100%; 
 
} 
 
/*.title{ 
 
    text-align:center; 
 
    width:calc(100% - 10px); 
 
    position:absolute; 
 
    left:5px; 
 
}*/

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      
 
      </head> 
 
      <body> 
 
      <div class="container-fluid"> 
 
      <div class="grid-item"> 
 
      <div class="row"> 
 
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
 
     <img class="Movieimg img-responsive" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg"> 
 
     </div> 
 

 
     <div class="hover col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-9 col-sm-offset-3 col-xs-9 col-xs-offset-3"> 
 
     <div class="row"> 
 
      <div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
      <div class="title">The title</div> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="details col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
       <a class="btn btn-danger btn-xs nzbdetails" href="" target="_self" data-toggle="tooltip" data-placement="left" title="Details"> 
 
        <i class="fa fa-eye" aria-hidden="true"></i> 
 
       </a> 
 
       <a href="" class="btn btn-primary btn-xs getnzb" data-toggle="tooltip" data-placement="right" title="Get NZB"> 
 
        <i class="fa fa-download" aria-hidden="true"></i> 
 
       </a> 
 
      </div> 
 
      </div> 
 
</div> 
 
</div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
    </html>

來源

2017-02-11 01:15:25 neophyte

在div div底部設置div

回答

相關問題