CSS Элемент позиционирования относительно дедушки и бабушки?

Я пытаюсь поместить элемент (кнопку) относительно элементов элемента 2 перед ним (изображение). Между изображением и кнопкой меняется текст. Посмотрите на моем сайте:CSS Элемент позиционирования относительно дедушки и бабушки?

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

То, что я пытаюсь достичь имея «Магазин сейчас» кнопка выравнивание по горизонтали для каждого продукта листинга, независимо от того, сколько текста под картинкой.

Мне показалось наиболее логичным способом сделать это, чтобы поместить кнопку относительно изображения, но я не могу понять, как это сделать. Дайте мне знать, если у вас есть идея, как это сделать, или если есть лучший способ достичь того, что я хочу делать.

Заранее спасибо.

источник

2013-04-24 bmcswee

Можем ли мы увидеть структуру CSS и HTML? Вы можете установить 'position' кнопки' 'relative' и использовать' top', 'bottom',' left', 'right', чтобы поместить его. Вы могли бы попытаться позиционировать как изображение, так и кнопку с «position: absolute» (при условии, что «позиция» родительского элемента установлена на нечто, отличное от 'static'). – celestialorb

проверить это один я думаю, что вы хотите что-то вроде этого

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 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, чтобы вы не возились с семантикой)

UNFORTUNATELY, некоторые современные браузеры (Firefox, я считаю) не будут поддерживать позицию: относительная на табличных ячейках (которые вам понадобятся), поэтому вы застряли в использовании JS, чтобы сделать ваш div одинаковой высоты ....

Самое простое решение: Прикрепите свой магазин сейчас на верхней части изображения - таким образом вы можете легко выровнять их по горизонтали. :)

источник

2013-04-24 17:11:51 Adam

CSS Элемент позиционирования относительно дедушки и бабушки?

ответ

Смежные вопросы