3

要素 (ボタン) を要素の 2 つ前の要素 (画像) に対して相対的に配置しようとしています。画像とボタンの間にさまざまな量のテキストがあります。私のサイトを見てください：

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

私が達成しようとしているのは、画像の下にあるテキストの量に関係なく、各製品リストの「今すぐ購入」ボタンを水平に配置することです.

この方法でボタンを画像に対して相対的に配置するのが最も論理的な方法のように思えましたが、これを行う方法がわかりません。これを行う方法についてのアイデアがある場合、または私がやりたいことを達成するためのより良い方法がある場合はお知らせください。

前もって感謝します。

4

4 に答える 4

0

下部にある [今すぐ購入] ボタンを中央揃えにするだけの場合は、

.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-24T16:57:27.983 に答える
0

画像の下にさまざまな量のテキストがある場合、要素はすべてさまざまな高さになり、画像の下にある [今すぐ購入] ボタンを水平方向に揃えることができなくなります。これを達成する唯一の方法は、すべての 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 の高さを同じにする方法は 2 つあります。

残念なことに、一部の最新のブラウザー (Firefox だと思います) は、テーブル セルの位置: 相対 (これが必要になります) をサポートしないため、JS を使用して div を同じ高さにする必要があります。

最も簡単な解決策: [今すぐ購入] ボタンを画像の上に貼り付けます。こうすることで、簡単に水平に並べることができます。:)

于 2013-04-24T17:11:51.563 に答える