CSS - position：絕對行爲奇怪並且移動的元素

我有WooCommerce store，並且正在更改顯示所有產品的頁面。這是一個貧窮的主題 - 每個產品的「更多」按鈕沒有對齊，它們是由標題移動，如果它是多行：CSS - position：絕對行爲奇怪並且移動的元素

我的解決辦法：

設置容器中的每個產品是爲相同的值的最小和最大寬度，以使它們都具有相等的高度
將下面的CSS上的每個按鈕：

底部：0;

position：absolute;

這個工作，但有一個問題：當一個產品稱號只佔用一行，讀更多的按鈕，跳出容器：

我想知道爲什麼會發生這種情況，那麼，爲什麼只有當標題長度爲一行時纔會發生這種情況？

我的修復方法是爲每個按鈕添加「float：left」，但是這會讓它移動得太遠讓我不得不用「margin-left」對此進行更正。

建議更好的方法來做到這一點，以及爲什麼發生這個問題將是太棒了！

乾杯。

來源

2017-08-10 Ruairi McNicholas

如果您可以使用flex（see this用於瀏覽器支持），我強烈建議您通過position:absolute來簡化它，特別是對於網站的響應版本。

這裏是你可以使用（刪除你絕對後）CSS3：

.woocommerce ul.products li { 
    display: flex; 
    flex-direction: column; 
} 

/** 
* flex-grow: 1; will make the header 'grow' as large as 
* possible to fit the available space and 'push' the link 
* down to the bottom. 
*/ 
.woocommerce ul.products li header { 
    flex-grow: 1; 
} 

.woocommerce ul.products li > a { 
    text-align: center; 
}

這將尤其要避免頭痛試圖避免重疊的時候，等

來源

2017-08-10 23:02:55 Jonathan

響應性的一大優勢。 –

相信我會跟着你的想法在最小高度和位置絕對...在responsive embed technique通過引導

// Only problem is, you also need a media query now :s 
.bpgPhoto { 
    ... 
    min-height: 200px; // so scratch that 
    padding: 50%; // this is the responsive embed technique 
} 

.boldPhotoBox { 
    ... 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    top: 0; 
    right: 0; 
} 

.boldPhotoBox .bpbItem, 
.boldPhotoBox .bpbItem .btImage { 
    ... 
    height: 100%; 
} 

// since the images differ in height, 
// and you want to keep their aspect ratio, 
// I'd suggest to add the border on the image class, rather than the `img` tag itself. 
.boldPhotoBox .bpbItem .btImage { 
    border: 1px solid rgba(0,0,0,.07); 
} 

.btLightSkin.woocommerce-page .product img { 
    border: none; 
}

更多信息，但是，我已經用了很多年才... pfuh ^^

來源

2017-08-10 23:07:08

CSS - position：絕對行爲奇怪並且移動的元素

回答

相關問題