CSS - 位置：奇妙な動きと要素の移動

Question

私はWooCommerce storeを持っていて、すべての製品を表示するページに変更を加えています。それは貧しいテーマだ - 整列されていない製品ごとに「続きを読む」ボタン、それは複数行だ場合、彼らはタイトルによって移動している：

私のソリューション：

• は彼らに

• は、各ボタンに以下のCSSを置き、すべて同じ高さを作るために、各製品が同じ値にしているコンテナの最小値と最大値の幅を設定します。

  下：0;

  ポジション：絶対;

これは一つの問題を除いて、働いていた：私は

： 製品のタイトルは一行、コンテナのうち続きを読むボタン休憩をとりますどうしてこのことが起こったのか疑問に思っています。そして、タイトルが1行の長さであるときになぜこれが起こるのですか？

私の解決方法は、各ボタンに "float：left"を追加することですが、少し余裕を持たせて、これを "margin-left"で修正する必要があります。

これを行うためのより良い方法と、なぜこの問題が発生するのかについての示唆は素晴らしいことでしょう。

乾杯。

Answer 1

フレックス（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; 
} 

重複を避けるためにしようとしたときにそれは特に頭痛を避けるためだろう、など

Answer 2

は、私はあなたのアイデアだ従うことができる信じますブートストラップによって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 ^^