Внешние таблицы стилей без применения стилей

У меня есть эта страница, чтобы протестировать новый макет для категории на веб-сайте на моей новой работе:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/grids-responsive-min.css" media="all" />
  </head>
  <body>
    <div id="category-desc-grid" class="pure-g">

      <div class="pure-u">
        <p class="title"></p>

        <p class="details">
          Throw Style &amp; Fitted Style<br>
          71 Fabric Color Choices<br>
          Fire resistant. Passes NFPA 701-2010<br>
          Full Color Dye Sublimation
        </p>

        <a href="#" class="button">Buy/View 24 Hour Tablecloths</a>
      </div>

      <div class="pure-u-1-2">
        <p class="title">Single Color Front Panel, Fitted Table Colors &amp; Throws</p>

        <p class="details">
          4ft, 5ft, 6ft, 8ft<br>
          74 Fabric Color Choices,<br>
          including neon colors.<br>
          Fire resistant. Passes<br>
          NFPA 701-2010
        </p>

        <a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
      </div>

      <div class="pure-u-1-2">
        <p class="title">Full Color Print Front Panel</p>

        <p class="details">
          Additional Panel Print $99<br>
          Fitted &amp; Throw Style<br>
          4ft, 5ft, 6ft, 8ft<br>
          71 Fabric Choices<br>
          F.R. - NFPA 701-2010
        </p>

        <a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
      </div>

    </div>

  </body>
</html>

Все включенные таблицы стилей - это масса, которую они включили в заголовок страницы, в которую этот код должен быть вставлен, за исключением последней, Pure Grid. Это тот вопрос, который не будет применяться ни один из его стилей. Как вы можете видеть, у меня есть классы из этой таблицы стилей в моем HTML, но никакие стили не присваиваются им при проверке. Однако применяются стили из предыдущих таблиц стилей.

Зачем

Я полностью удалил таблицу стилей сетки и добавил одну простую строку: .display-grid .half { display: inline-block; width: 50%; max-width: 50%; } но он будет разбит только на две части, если я исключу правило ширины. Невероятно.

Я только добавил автономную сетку Bootstrap.

Источник

2 ответа

Я скопировал ваш код в моей системе. Консоль осмотра жаловалась, что кодировка символов не была объявлена, поэтому я вставил <meta charset="utf-8"/> фрагмент в <head> теги.

Кроме того, я посмотрел на файл Pure Grid CSS. Похоже, что некоторые элементы отсутствуют, когда вы использовали имена классов. Например, я изменил "pure-u" в "pure-u-sm-1-24" и это сработало в моем браузере.

Источник 

<!DOCTYPE html>
<html>
  <head>
 
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/js/tm/easylightbox/lightbox/css/lightbox.css" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/reset.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/boxes.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/styles.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/default/delivery/css/menu.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/widgets.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/aitpagecache.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/crimson/catalog/css/catalog.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/magmodules/snippets/snippets.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/magmodules/snippets/breadcrumbs.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://dev.premiertablelinens.com/skin/frontend/base/default/css/tm/easytabs.css" media="all" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/grids-responsive-min.css" media="all" />
 <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css"/>
 <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-min.css"/>
  </head>
  <body>
    <div id="category-desc-grid" class="pure-g">
      <div class="pure-u">
        <p class="title"></p>
        <p class="details">
          Throw Style &amp; Fitted Style<br>
          71 Fabric Color Choices<br>
          Fire resistant. Passes NFPA 701-2010<br>
          Full Color Dye Sublimation
        </p>
        <a href="#" class="button">Buy/View 24 Hour Tablecloths</a>
      </div>
      <div class="pure-u-1-2">
        <p class="title">Single Color Front Panel, Fitted Table Colors &amp; Throws</p>
        <p class="details">
          4ft, 5ft, 6ft, 8ft<br>
          74 Fabric Color Choices,<br>
          including neon colors.<br>
          Fire resistant. Passes<br>
          NFPA 701-2010
        </p>
        <a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
      </div>
      <div class="pure-u-1-2">
        <p class="title">Full Color Print Front Panel</p>
        <p class="details">
          Additional Panel Print $99<br>
          Fitted &amp; Throw Style<br>
          4ft, 5ft, 6ft, 8ft<br>
          71 Fabric Choices<br>
          F.R. - NFPA 701-2010
        </p>
        <a href="#" class="button">Available in 1, 2, or 3 Day Production</a>
      </div>
    </div>
  </body>
</html>

Вы забыли добавить еще два файла, например, base-min.js и grids-min.js.

Источник
Другие вопросы по тегам