小编Hac*_*sch的帖子

没有javascript和没有屏幕宽度的媒体查询

我试图找到一种仅用于css的方法来实现下图所示的情况.我找不到创建以下内容的方法:

• 一行具有可变宽度的块(内联块或浮动块),使用float对齐到行的右侧:右或右文本对齐
• 不适合该行的元素,换行到下一行.第一行之后的所有元素都有自己的行.

我一直在尝试几种策略无济于事,我有一种感觉,Flexbox可能会有所帮助,但我对flexbox并不是很有经验,也找不到使用它的方法.

我尝试过的一些事情:

1. 尝试将元素的内容放在:before伪元素中,使用content:attr(data-content).元素本身没有宽度.在下一行中,将有一个宽度为99.9%的左浮动元素,它将每个元素推到下一行.这个问题是第一行的元素应该保持正常的宽度,我没有办法做到这一点.:第一行伪选择器仅限于行上的单词,不适用于行上的内联容器
2. 替代上述方法:还添加:在绝对定位的伪元素之后,其内容与:befores相同.:之前元素只显示在第一行而不包装,:after元素将形成右侧的垂直列表.也是这样,我走进了一个死胡同.

更新: 当元素的宽度固定且相等时,我制作了一个(较少)小提琴.不幸的是固定宽度,所以还不是我想要实现的.如果你想帮助我,你可以用这个作为起点.我把内容放在:之前也许它可能溢出元素并以某种方式将元素宽度固定为auto.

目前仅限CHROME:http://jsfiddle.net/2px3b63j/7/

HTML:

<div class="pusher"></div>
<nav>
  <a data-title="First" href="#"></a><a data-title="Second" href="#"></a><a data-title="Third" href="#"></a><a data-title="Fourth" href="#"></a><a data-title="Fifth" href="#"></a>
</nav>

减:

@h: 3em;
@w:6em;
* {
  margin: 0;
  padding: 0;
}

body {
  font: 0.9rem sans-serif;
  background: #666;
}

.pusher {
  float: left;
  width: ~"calc(100% - " (@w * 1.01) ~")";
  height: @h * 6;
  -webkit-shape-outside: polygon(0 @h, 100% @h, 100% 100%, 0 100%);
}

nav …

我在网上发现了很多关于Firefox没有显示本地webfonts(在服务器上)的问题,但没有一个解决方案适合我.在Firefox中打开https://nl.hacktisch.com/,查看不加载字体(分享按钮中的Karla和图标字体,右上角).

大多数答案都是关于Firefox中的严格原始限制,但即使在.htaccess中使用以下设置也无效:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

甚至

Header set Access-Control-Allow-Origin "*"

你可以在firefox检查器中看到浏览器甚至没有尝试加载字体:

这表明css字体声明是错误的,但我也尝试了几种在css中定义字体的方法.目前如下:

@font-face {
    font-family: Karla;
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/k.eot');
    src: url('/fonts/k.eot?#iefix') format('embedded-opentype'), local('Karla'), local('k'), url('/fonts/k.woff2') format('woff2'), url('/fonts/k.woff') format('woff'), url('/fonts/k.ttf') format('truetype'), url('/fonts/k.svg#Karla') format('svg')
}
@font-face {
    font-family: Karla;
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/k7.eot');
    src: url('/fonts/k7.eot?#iefix') format('embedded-opentype'), local('Karla Bold'), local('k7'), url('/fonts/k7.woff2') format('woff2'), url('/fonts/k7.woff') format('woff'), url('/fonts/k7.ttf') format('truetype'), url('/fonts/k7.svg#Karla') format('svg')
}
body{ …

我正在尝试默认将上传到存储桶的文件设置为公共.

在编辑存储桶权限时,我得到了我不明白的弹出窗口,我找不到任何关于它的文档.如何为公众设置可用性？

"实体"选择框具有以下选项:域,组,用户,项目

目前的设置似乎没有将文件设置为公共,因为当我尝试通过CloudStorageTools::getPublicUrl($fileName, false)我获得的URL访问文件时:

<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
</Error>