Div внутри a: Может ли тег a содержать внутри div? — Хабр Q&A

Leave a Comment / Разное / By /

html — Как обратиться к div внутри div

Здравствуйте.

Есть блок и внутри него ещё два блока. Хочу чтобы первый внутренний блок занимал левую часть экрана (50% экрана), а второй блок правую (50% экрана). Пробовал сделать сам, но так и не получилось. Не могу достучаться до div'ов внутри #father.

Пример:

#son {
  height: 400px;
  width: 300px margin-left: auto;
}
#daughter {
  height: 400px;
  width: 300px margin-right: auto;
}
<div>
  <div>....</div>
  <div>....</div>
</div>

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

  • html
  • css
  • html5

5 

#son{
  display: inline-block;
  height: 400px;
  width: 300px;
  background-color: #3498DB;
  margin: 0px;
  padding: 0px;
}
#daughter{
  display: inline-block;
  height: 400px;
  width: 300px;
  background-color: #E74C3C;
  margin: 0px;
  padding: 0px;
}
<div>
  <div></div><div></div>
</div>

4 

#father {
  height: 100px;
  width: 200px;
  border: 2px solid blue;
}
#son {
  height: 100%;
  width: 50%;
  margin-left: auto;
  background: green;
  float: left;
}
#daughter {
  height: 100%;
  width: 50%;
  margin-right: auto;
  background: red;
  float: right;
}
<div>

  <div></div>
  <div></div>

</div>

Например, с использованием flex, т. к. float уже морально устарели 🙂

p.s. Добавил border для демонстрации

#father {
  display: flex;
  flex-direction: row;
}

#son, #daughter{
  height: 400px;
  flex-grow: 1;
  border: 1px solid red;
}

#daughter{
  border: 1px solid blue;
}
  
<div>
  <div>....</div>
  <div>....</div>
</div>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

DIV официально разрешён внутри DL

В стандарт HTML («живую» WHATWG-версию) недавно внесено долго­жданное изменение, благодаря которому непосред­ственными дочерними элементами элемента DL теперь могут быть не только DT и DD, но и DIV, между которыми (как и между DT и DD) могут также располагаться SCRIPT и TEMPLATE.

При этом, судя по спецификации, дочерними элементами

одного и того же DL не могут быть одно­вре­менно DT/DD и DIV. Иными словами, соседними элементами DT/DD и DIV по-прежнему быть не могут, т. е. такой код теперь разрешён:

<dl>
    <div>
        <dt>Lorem</dt>
        <dd>Ipsum</dd>
    </div>
    <div>
        <dt>Dolor</dt>
        <dd>Amet</dd>
    </div>
</dl>

а такой — нет:

<dl>
    <dt>Lorem</dt>
    <dd>Ipsum</dd>

    <div>
        <dt>Dolor</dt>
        <dd>Amet</dd>
    </div>


</dl>

В официальном HTML-валидаторе W3C данное изменение WHATWG-версии специ­фикации HTML пока не учитывается, но уже учитывается в экспери­ментальном валидаторе HTML5. org.

Предыстория

Ранее применение стилей к отдельно взятой группе элементов DT/DD как единому целому было невозможно, и при­ходи­лось либо жертвовать семантикой, вместо одного списка DL используя несколько следующих друг за другом и семан­тически не связанных элементов DL, каждый из которых содержал собственную группу DT/DD, либо вместо списка DL использовать список UL, каждый элемент которого содержал отдельный элемент DL, содержащий ровно одну группу DT/DD, что несколько загромождало HTML-код.

Запросы от веб-разработчиков на добавление возможности группировки элементов DT/DD в течение многих лет отклонялись, а пред­ста­вители рабочих групп HTML и CSS настаивали на том, что задачу лучше решить на уровне CSS и HTML соответственно.

HTML

Редактор спецификации HTML Ян Хиксон (Ian Hickson) заявлял, что задача группировки элементов с целью применения стилей относится не к HTML, а к CSS, и должна решаться с помощью гипоте­тического механизма генерации виртуальных контейнеров средствами CSS.

Аргументом технического характера были трудности, связанные с возможными неодно­знач­ностями при разборе кода списков DL, содержащих что-либо помимо DT и DD, с учётом порочной особенности HTML, состоящей в легитимной возможности не указывать закрывающие теги некоторых элементов, в том числе DT и DD, хотя едва ли кто-то в здравом уме пользуется этой возможностью.

CSS

Пред­ста­вители рабочей группы CSS (CSSWG), в том числе Элика Этемад (Elika Etemad), известная как fantasai, напротив, были уверены, что целе­сооб­разнее решить вопрос средствами HTML, т. к., по их словам, псевдо­элементы трудно описать в спецификации и они слишком сложны в реализации и использовании.

Дополни­тельные аргументы в пользу HTML-решения состояли в том, что наличие реального обрамляющего элемента позволило бы ссылаться на него с помощью якоря (хотя на практике вполне достаточно назначить иденти­фикатор элементу DT соответ­ствующей группы), а также дало бы возможность легко оперировать группами DT/DD средствами DOM (хотя на самом деле возможность получения отдельной группы как массива элементов или объекта DocumentFragment можно было бы встроить в DOM без необходимости обрамления групп реальными HTML-контейнерами).

Огромным преимуществом потенци­ального CSS-решения была бы возможность группировать разные наборы элементов в зависимости, например, от Media Queries, что абсолютно невозможно в случае с контейнерами, явным образом фигури­рующими непосред­ственно в HTML-коде.

На сайте CSSWG даже есть страница, предлагающая возможный синтаксис описания виртуальных контейнеров в таблицах стилей, но недавний запрос тайваньского веб-разработчика Яна Янга (Ian Yang) на превращение данного предложения в полно­ценный официальный стандарт был отклонён под тем предлогом, что интерес к реализации такого механизма со стороны разработчиков браузеров де-факто отсутствует. Автору этих строк в контексте такой аргументации почему-то вспоминается книга Алана Купера «Псих­больница в руках пациентов».

Сдвиг

Остаётся порадоваться, что наконец произошёл сдвиг со своего рода мёртвой точки — хотя бы в HTML и хотя бы в отношении элементов DL/DT/DD.

Теперь появляется надежда на то, что контейнеры общего назначения DIV и SPAN когда-нибудь станут действительно семан­тически прозрачными и их можно будет помещать в иерархию между любыми элементами, которые связаны между собой семанти­ческими отношениями «родитель — дочерний элемент», в том числе:

  • FIELDSET и LEGEND;
  • FIGURE
    и FIGCAPTION;
  • UL/OL и LI.

css — тег внутренней ссылки ()

Задавать вопрос

спросил

Изменено 2 года, 2 месяца назад

Просмотрено 121 тысяч раз

Я хочу сделать div кликабельным, но внутри этого

У меня есть еще один
, который также должен быть кликабельным или связанным.

HTML

 
    <дел>

CSS

 .box{
    плыть налево;
    ширина: 100 пикселей;
    высота: 100 пикселей;
}
.плюс{
    плыть налево;
    ширина: 30 пикселей;
    высота: 30 пикселей;
}

Могу ли я сделать как

для ссылки, так и для разных ссылок?

и правильно ли использовать div внутри a href ?

  • CSS
  • HTML

3

Начиная с HTML5 можно обернуть элементов вокруг

(или любых других блочных элементов):

Элемент a может охватывать целые абзацы, списки, таблицы и т. д., даже целые разделы, если внутри нет интерактивного содержимого (например, кнопок или других ссылок).

Просто убедитесь, что вы не поместили в свой (или

Вы можете сделать то же самое с некоторыми другими элементами, просто предварительно проверьте ссылку на HTML-элемент MDM (или спецификацию HTML 5).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *