Блог

Главная - Вопросы по программированию - Микроданные и divs

Микроданные и divs

#html #microdata

#HTML #микроданные

Вопрос:

Мои два divs ( article-tag-summary и article-date-summary ) принадлежат article-image-summary div. Это хорошо и не может измениться.

Все принадлежит schema.org/Article , таким образом, также <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> .

Проблемы:

  1. 1 — Если я закроюсь <div class="article-image-summary"
    itemprop="image">     , то два раздела выпадут за пределы изображения, и это плохо скажется на моем стиле CSS.
  2. 2 — Если я НЕ закрою его, то itemprop="articleSection и itemprop="datePublished НЕ распознаются в schema.org потому что они относятся к ImageObject и НЕ schema.org/Article , что тоже плохо.

Это чисто проблема HTML… что мне нужно, так это чтобы date-summary и tag-summary подпадали под image-summary (чтобы НЕ закрывать div перед ними), и чтобы у этих двух divs были itemprops, которые относятся к schema.org/Article , а НЕ к ImageObject .

В приведенном ниже примере показаны два закрывающих раздела перед датой и тегом, что означает schema.org проверка работает. Но в этом случае мой стиль CSS для этих двух элементов не работает, потому что они выходят за пределы image-summary div.

 <div itemscope itemtype="http://schema.org/Article">
        <div itemprop="image" itemscope itemtype=
        "http://schema.org/ImageObject">
            <div class="article-image-summary" itemprop="image">
                <meta content="auto">
                <meta content="100"><a href="#"><img alt=
                "#" itemprop="url" src=
                "#"></a>
            </div>
        </div>
        <div class="article-tag-summary" itemprop="articleSection">
            <a href="#>tag</a>
        </div><!--<div class="article-data">-->
        <div class="article-date-summary" itemprop="datePublished">
            date
            <div class="page-views">
                <i class="fa fa-eye"></i> count
            </div>
        </div><!--</div>-->
        <h2 class="title-article-masonry" itemprop="headline"></h2>
    </div>

Комментарии:

1. Я не думаю, что ваш фрагмент правильно отображает вашу проблему. Изображение отсутствует.

2. Если CSS не работает, можете ли вы опубликовать CSS?

3. @Zack, я перефразировал свой вопрос, это не проблема CSS.

4. @sdexp — Я перефразировал свой вопрос, это не проблема CSS.

5. Не совсем понятно, в чем проблема. Если вы хотите, чтобы определенные divs попадали под другой div, поместите их туда…

Ответ №1:

Возможно, вы сможете решить эту проблему с itemref помощью атрибута Microdata.

Чтобы это сработало, вам нужно переместить article-tag-summary и article-date-summary (и, возможно, другие свойства, которые следуют) за пределы schema:Article элемента.

Присвойте каждому свойству id значение , и ссылайтесь на эти id значения в itemref атрибуте («foo1» и «foo2» в моем примере):

 <div itemscope itemtype="http://schema.org/Article" itemref="foo1 foo2">

  <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  </div>

</div>

<div id="foo1" class="article-tag-summary" itemprop="articleSection">
</div>

<div id="foo2" class="article-date-summary" itemprop="datePublished">
</div>

Если вам нужна группировка div для всех этих частей, вы, конечно, можете добавить ее. Поскольку вы используете Schema.org Article тип s, article элемент, скорее всего, более подходящий, чем a div .

Метки: