Question

我有这个页面，在我的新工作中测试网站上某个类别的新布局：

.display-grid .half { display: inline-block; width: 50%; max-width: 50%; }

包含的所有样式表都是它们包含在要插入此代码的页面头部的质量，除了最后一个，Pure Grid。这是一个不适用任何风格的问题。正如您所看到的，我在HTML中拥有该样式表中的类，但在检查时没有样式归属于它们。但是，之前样式表中的样式正在应用。

为什么

我完全删除了网格样式表并添加了一个简单的行：std::transform(thing.begin(), thing.end(), thing.begin(), [](float value) { return std::max(0, value); });但如果我排除宽度规则，它只会分成两半。难以置信的。

我刚刚添加了Bootstrap网格。

Answer 1

我在你的系统上复制了你的代码。检查控制台抱怨未声明任何字符编码，因此我在<meta charset="utf-8"/>标记中插入了<head>代码段。

另外，我查看了Pure Grid css文件。使用类名时，似乎缺少某些元素。例如，我将"pure-u"更改为"pure-u-sm-1-24"，并且它在我的浏览器中有效。

Answer 2

＆＃13;

<!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>

＆＃13;

上面你忘了再添加两个文件，比如-base-min.js和grids-min.js

外部样式表不应用样式

2 个答案: