purecss 的 grid 样式问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

purecss 的 grid 样式问题

2016-03-25 10:18:36 1725 1

网址是这个

我本地笔记本mac测试(chrome,safari)的时候,一行三列那个grid一切正常。但是用台式机windows测试的时候(chrome,360,ie,ff等),就只有两个pure-u-1-3在一排,另一个到下一排去了,不知道为什么。但是用IE,FF显示良好。

我看了笔记本和台式机chrome版本都是最新的啊。莫非是屏幕宽度问题?那为啥IE又显示正确了呢。

我打开官方示例的时候无论什么浏览器都没有问题。

我个人感觉可能是 1. 屏幕尺寸问题 2. 其他样式干扰 *

不过我纯业余啊,完全不懂前端啊!我也不知道那个Refinery CMS自带的样式哪些可以由purecss代替的,直接删掉的。感觉直接覆盖应该没有问题才对啊!

求大虾帮忙!

<div class="pure-g-r">
  <div class="pure-u-1-3">
  </div>
  <div class="pure-u-1-3">
  </div>
  <div class="pure-u-1-3">
  </div>
</div>
<!DOCTYPE html>
<%= render '/refinery/html_tag' %>
  <% site_bar = render('/refinery/site_bar', :head => true) -%>
  <%= render '/refinery/head' %>
  <body>
    <%= site_bar -%>
    <%= render '/refinery/ie6check' if request.env['HTTP_USER_AGENT'] =~ /MSIE/ -%>
    <div id="page_container">
      <header id="header">
        <%= render '/refinery/header' -%>
      </header>
      <section id="page">
        <%= yield %>
      </section>
      <footer>
        <%= render '/refinery/footer' -%>
      </footer>
    </div>
    <%= render '/refinery/javascripts' %>
  </body>
</html>
<head>
  <meta charset='<%= Rails.application.config.encoding %>' />
  <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><![endif]-->
  <title><%= browser_title(yield(:title)) %></title>
  <%= raw %(<meta name="description" content="#{@meta.meta_description}" />) if @meta.meta_description.present? -%>
  <%= raw %(<meta name="keywords" content="#{@meta.meta_keywords}">) if @meta.meta_keywords.present? -%>
  <%= raw %(<link rel="canonical" content="#{@canonical}" />) if @canonical.present? -%>
  <%= csrf_meta_tags if Refinery::Core.authenticity_token_on_frontend -%>
  <%= yield :meta %>

  <%= stylesheet_link_tag "application", "formatting", "theme" %>
  <%= stylesheet_link_tag "home" if home_page? %>
  <%= yield :stylesheets %>

  <%= render '/refinery/google_analytics' %>

  <%= javascript_include_tag 'modernizr-min' %>
</head>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:13:38

    因为字体!!他的grid是用 display inline-block 横向平铺的原理实现的 你看他的样式里面引入了一个字体的,要么修改他的源码里面letter-spacing:-0.43em [依稀记得类似这样子]这个值的大小,要么也引入他的那个字体

    0 0
相关问答

1

回答

请问静态文件CSS和JS,在SERVERLESS DEVOPS 发布后加载不了怎么处理?PYTHON

2022-08-22 12:43:44 247浏览量 回答数 1

26

回答

我存放在OSS里面的js文件和css文件访问的时候都乱码了,请问怎么回事呀

2022-03-02 17:45:44 30763浏览量 回答数 26

1

回答

JSP页面好像引入不了js,css文件,需要设置什么吗?:报错

2020-06-14 11:04:14 547浏览量 回答数 1

1

回答

nginx反向代理后 js css文件不加载:报错

2020-06-14 07:51:58 544浏览量 回答数 1

1

回答

关于amazeui的js和css加载CDN失败的处理:报错

2020-06-07 21:11:16 526浏览量 回答数 1

1

回答

Jfinal的web-inf里的html文件引用js,css:报错

2020-06-07 08:01:07 451浏览量 回答数 1

1

回答

js、css合并请求? 报错

2020-06-04 17:39:16 350浏览量 回答数 1

1

回答

nginx反向代理后 js css文件不加载 - nginx报错

2020-06-03 10:17:17 875浏览量 回答数 1

1

回答

js、css合并请求? 400 报错

2020-06-02 11:35:00 314浏览量 回答数 1

1

回答

你了解 CSS Flex 和 Grid 吗?

2019-11-18 16:56:00 316浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载