CSS相對於祖父母的定位元素？

我想要定位一個元素（一個按鈕）相對於元素2元素之前（圖片）。圖片和按鈕之間的文本數量不等。看看我的網站：CSS相對於祖父母的定位元素？

http://gorilla-gym.com/product-category/fitness-attachments/

我想要實現的是有「立即購買」按鈕的每個產品不論多少文字圖片下面列出水平對齊。

在我看來，這是最合乎邏輯的方式來定位按鈕相對於圖片，但我無法弄清楚如何做到這一點。讓我知道你們是否知道如何做到這一點，或者是否有更好的方法來實現我想做的事情。

在此先感謝。

2013-04-24 bmcswee

我們可以看到一些CSS和HTML結構嗎？您可以將按鈕的「位置」設置爲「相對」，並使用「頂部」，「底部」，「左側」，「右側」將其定位。你可以嘗試用'position：absolute'來定位圖像和按鈕（假設父元素的'position'被設置爲'static'以外的東西]。 – celestialorb 2013-04-24 16:22:51

檢查這一塊我想你想這樣的事情

http://jsfiddle.net/FWzzR/1/

CSS

ul.products { 
    display:table; 
    width:100%; 
    table-layout:fixed; 
    border-collapse:separate; 
    border-spacing:10px; 
} 

.products > li { 
    background-color: #4F81BD; 
    border:2px solid #385D8A; 
    position: relative; 
    width: 22.05%; 
    display: table-cell; 
    padding:10px; 
    padding-bottom:50px; 
    text-align:center; 
    vertical-align:top; 
} 

.products > li >a { 
    display:block; 
} 

.products a.button { 
    position:absolute; 
    bottom:10px; 
    left:50%; 
    margin-left:-40px; 
    font-size: 100%; 
    line-height: 1em; 
    cursor: pointer; 
    text-decoration: none; 
    padding: 6px 10px; 
    font-family: inherit; 
    font-weight: bold; 
    color: #FFF; 
    text-shadow: 0 1px 0 #FF6311; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); 
    border: 1px solid #973100; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    background: #FD5200; 
    background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100)); 
    background: -webkit-linear-gradient(#FD5200, #CA4100); 
    background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%); 
    background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%); 
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1); 
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1); 
}

來源

2013-04-24 16:54:38

如果你想要的是居中底部對齊「立即購買」按鈕，然後

.shopnow_button{ 
    display: block; 
    margin: 0 auto; //something was overriding so I had to do !important here 
    width: 57px; // can be any value < the width of the parent container(Ofcourse !) 
}

來源

2013-04-24 16:57:27

如果圖片下面有不同數量的文本，則這些元素的高度都會變化，並且您無法將圖片下方的「立即購買」按鈕對齊。做到這一點的唯一方法是通過確保所有的div的高度相同，那麼你只定位店內現按鈕如下：

<div class="shop-now-div"> 
<img src="yourimage.jpg"> 
Lorem ipsum.... 
<a class="button" href="#">Shop Now</a> 
</div> 


.button { position: absolute; bottom: 5px; right: 5px; } 
.shop-now-div { position: relative; }

有兩種方法可以讓你的div的同一高度 1 ）JavaScript（不推薦，這是一個痛苦） 2）一個表（在CSS中做，所以你不會搞亂語義）

不幸的是，一些現代瀏覽器（Firefox，我相信）不會支持position：relative在桌上的細胞（你將需要），所以你堅持不得不用JS來使你的div的高度....

最簡單的解決方案：將您的商店現在粘貼在圖像頂部 - 這樣您就可以輕鬆地將它們水平對齊。 :)

來源

2013-04-24 17:11:51 Adam

CSS相對於祖父母的定位元素？

回答

相關問題