Позиционирование двух ссылок изображения бок о бок

Я пробовал несколько разных примеров, найденных в сети, но теперь у меня нет идей ... Я пытаюсь получить две ссылки на изображения, расположенные на странице рядом.Позиционирование двух ссылок изображения бок о бок

Мой текущий код выглядит следующим образом:

HTML

<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<div class="home"> 
<a href="http://www.xxx.net/blog/" id="h1"></a> 
<a href="http://www.xxx.net/gallery/" id="h2"></a> 
</div>

CSS

div.home a { 
    float: left; 
} 

div.home { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

div.home #h1 { 
    width: 500px; 
    height: 350px; 
    display: block; 
    background-image: url('header1.jpg'); 
} 

div.home #h1:hover { 
    background-image: url('header1hover.jpg'); 
} 

div.home #h2 { 
    width: 500px; 
    height: 350px; 
    display: block; 
    background-image: url('header2.jpg'); 
} 

div.home #h2:hover { 
    background-image: url('header2hover.jpg'); 
}

источник

2013-05-11 Jon

вы должны добавить display : inline в a теги и установить правильный ширина

Update:

посмотреть Demo

источник

2013-05-11 20:22:49 mehdi

Правильная ширина установлена, 500 пикселей для каждого изображения. Ваша демо не работала вообще. – Jon

@ user2373664, поэтому вы должны установить ширину для #home div, чтобы увидеть это обновление: http://jsfiddle.net/qA8K4/1/ – mehdi

Определенно приближаясь, но это испортило все зависание, теперь оба изображения срабатывают, когда вы наведите его, и он расположен в центре по горизонтали, но вертикально вверх. – Jon

Вы можете поместить изображения в строке таблицы с 2-х полей. Затем отобразите эту таблицу в центре.

источник

2013-05-11 20:21:57 manoj

Не смотря на детский сад писак, хотя мой кодирование на этом уровне , – Jon

Это не дает ответа на вопрос. Чтобы критиковать или запросить разъяснения у автора, оставьте комментарий ниже своего сообщения - вы всегда можете прокомментировать свои собственные сообщения, и как только у вас будет достаточно [репутации] (http://stackoverflow.com/faq#reputation), вы сможете [прокомментировать любое сообщение] (http://stackoverflow.com/privileges/comment). – skuntsel

@skuntsel: Как это не «дает ответ на вопросы?» – Jawad

Позиционирование двух ссылок изображения бок о бок

ответ

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