0

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

<!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 网格。

4

2 回答 2

0

我在我的系统上复制了你的代码。检查控制台抱怨没有声明任何字符编码，所以我在标签中插入了一个<meta charset="utf-8"/>片段。<head>

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

于 2017-12-05T17:12:58.913 回答
-1 

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

于 2017-12-05T18:45:16.153 回答