放置一個盒子底部，它可以在高度增長

-1

我有一個容器，我應該把我的主要圖片，這是：「bigImg」。這必須至少是最小高度：230px。放置一個盒子底部，它可以在高度增長

在「bigImg我添加了一個支架的圖像本身‘持有人’，現在我我想要的‘持有人’總是定位在底部」，但接着說，「bigImg」可以增長根據圖像尺寸（在高度）。

enter image description here

<div class="leftSidebar"> 
    <div class="bigImg"> 
     <div class="holder"> 
      <a class="fancybox" rel="group" href="#"><img src="http://s10.se/agv/img/product/34072.jpg" alt="glass" /></a> 
     </div> 
    </div><!-- end - bigImg --> 
</div><!-- end - leftSiebar --> 

.leftSidebar { 
    float:left; 
    width:428px; 

    background:#ffff00; 
    padding:0px 0px 3px 0px; 
} 
div.leftSidebar .bigImg { 
    position:relative; 
    display:block; 
    width:100%; 
    min-height:230px; 
    margin:0px 0px 0px 0px; 
    padding:0px 0px 0px 0px; 
    text-align:center; 
} 
div.bigImg .holder { 
    position:absolute; 
    bottom:0px; 

    display:inline-table; 
    vertical-align:bottom; 
    background:#f00f00; 
    padding:0px 0px 1px 0px; 
} 
div.bigImg img { 
    max-width:390px; 
}

jsfiddle

來源

2014-01-10 Lars Holmqvist

您的圖像高度（http://s10.se/agv/img/product/34072.jpg）比你的至少最小高度更大：230px。那麼你如何設定它的底部。降低圖像的高度。 –

圖像的高度將在160px到900px的範圍內變化，而我將所有設置爲230px的最小高度設置爲屏幕顯示，因此我正在定位「holder」底部，我得到了頂部邊距 –

您是否真的需要把絕對位置放在你的.holder上？ – enguerranws

如果我理解正確的話，你應該改變position: absolute到position: fixed

而在IMG和持有人使用的z-index。

觀看演示http://jsfiddle.net/kcZhy/2/

來源

2014-01-10 09:24:32

不是我認爲的，我認爲，「」會增加高度，當你有一個更大的圖像，並從底部開始，最小值爲230px的高度。 –

什麼會增長？紅色的盒子還是什麼？我發佈的演示顯示，紅色框現在「增長」你的圖片有多高。如果您將ing src更改爲另一張圖片，並假設您在ing CSS上設置了padding-top：4px。你會看到紅色框覆蓋了頂部和底部的img。所以紅色框上的高度由img設置。 –

是的，紅色的盒子，見上圖。 –

檢查 - http://jsfiddle.net/kcZhy/7/

底部對齊，在高度增長向上。

你的CSS看起來很凌亂:)多顯示，填充和BigImg類的位置。

.outerholder { 
display:table-cell; 
vertical-align:bottom; 
height: 500px; 
width: 500px; 
text-align: center; 
border: 1px dotted grey; 
} 
.holder { 
margin-left: auto; 
margin-right: auto; 
min-height: 1px; 
border: 1px solid grey; 
} 
img { 
height: 80px; 
}

和HTML：

<div class="outerholder">  
<div class="holder"> 
<a class="fancybox" rel="group" href="#"><img src="http://s10.se/agv/img/product/34072.jpg" alt="glass" /></a> 
</div> 
</div>

來源

2014-01-10 11:27:42

放置一個盒子底部，它可以在高度增長

回答

相關問題