Wrap link <a>вокруг <div>

Ответ 1

Эта структура будет действительна в HTML5, поскольку в HTML5 якоря могут обернуть почти любой элемент, за исключением других привязок и элементов управления формой. Большинство браузеров в настоящее время имеют поддержку для этого и будут анализировать код в вопросе как допустимый HTML. Ответ ниже был написан в 2011 году и может быть полезен, если вы поддерживаете устаревшие браузеры (* cough * Internet Explorer * cough *).

Старые браузеры без синтаксических анализаторов HTML5 (например, Firefox 3.6) будут по-прежнему запутываться в этом и, возможно, испортить структуру DOM.

Три варианта HTML4 - используйте все встроенные элементы:

<a href=etc etc>
    <span class="layout">
        <span class="title">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

Затем стиль с display: block

Используйте JavaScript и :hover:

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

И (предполагая jQuery)

$('.layout').click(function(){
    // Do something
}):

и

.layout:hover {
    // Hover effect
}

Или, наконец, используйте абсолютное позиционирование для размещения якоря a с CSS для охвата всего .layout

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a class="more_link" href="somewhere">More information</a>
</div>

И CSS:

.layout {
    position: relative;
}

.layout .more_link {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -9999px;
    z-index: 1000;
}

Это, конечно, не будет работать со старыми версиями IE.

Ответ 2

В то время как тегу <a> не разрешено содержать элемент <div>, он может содержать другие встроенные элементы, такие как <span>.

Когда я столкнулся с проблемой, я поменял тег div на <span>. Поскольку тег span является встроенным элементом, вам необходимо применить display:block к css вашего элемента <span>, чтобы заставить его вести себя как элемент блока <div>. Это должно быть допустимым xhtml и не требует javascript.

Вот пример:

<a href="#">
    <span style="display:block">
        Some content. Maybe some other span elements, or images.
    </span>
</a>

Ответ 3

Решение Timothy правильное... вместо того, чтобы обернуть привязку вокруг div... вы просто даете макет анкерному элементу с отображением: блок и добавьте размер и ширину привязки...

.div_class   { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }

<div class='div_class'><a href="#"></a></div> 

Ответ 4

Еще одно простое решение - просто добавьте обработчик события onclick в div следующим образом:

<div class="layout" onclick="location.href='somewhere'">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

Это отлично работает для меня, но есть одна небольшая магия. Я не знаю, как это выглядит в поисковой системе. Я боюсь, что поисковые роботы Google могут не найти эту ссылку, поэтому я также склонен включать традиционную ссылку HREF где-то в блоке следующим образом:

<div class="layout" onclick="location.href='destination_url'">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a href="destination_url">This is a link</a>
</div>

Ответ 5

Вы просто хотите стилизовать тег "a" как display: block;

Eclipse правильно сообщает вам, что ваш HTML не специфицирован (поскольку тег div не разрешен в теге привязки).

Но, поскольку вы, кажется, хотите быть визуально, делая якорь похожим на крупно-ол-бокс, а затем просто создавайте его как таковой:)