我正在摆弄基于 CSS 网格的前端，并且在前端的不同部分一遍又一遍地需要以下行为:
所以如果我碰巧需要五行，这就可以了:
.myGridForFiveRows
{
display: grid;
grid-template-rows: auto auto auto auto 1fr;
}
但是，我非常想要一个样式表，它可以为任何给定的行数生成正确的行为。我想也许我可以以某种方式使用 repeat() 来做到这一点？
https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
.myGrid
{
display: grid;
grid-template-rows: repeat(auto-fit, auto) 1fr;
}
我一直在研究 repeat(auto-fit, auto) 和 repeat(auto-fill, auto) 的变体，不幸的是它们不合法CSS，而 repeat(4, auto) 或 repeat(auto-fill, 30px) 是。
有什么想法吗？这不是我无法避免的事情，但碰巧“显示 n 个适当大小的行，然后让最后一个元素占据所有剩余空间”基本上是我规范中所有元素的默认行为......
最佳答案
考虑到您的三个要求:
- A grid with a variable number of rows.
- Every row should have a variable size (auto will do).
- The last row should always take up all the remaining space.
Flexbox 非常适合这项工作。事实上，它可能是最合适的(取决于您的其他要求)。我在下面提供了一个代码示例。
但如果网格布局是您想要的，那么我想您会失望的。我不相信Level 1可以胜任这项工作。
你能得到的最接近的是:
grid-template-rows: repeat(auto-fit, minmax(auto, 1px)) 1fr;
但它不会工作，因为当前的网格规范不支持这种语法。
repeat(auto-fit, auto) 1fr 这是您尝试过的代码。它无效，因为 auto和 fr不能与 auto-fit 一起使用.
Automatic repetitions (
auto-fillorauto-fit) cannot be combined with intrinsic or flexible sizes.
你可以绕过 auto像这样的限制:
repeat(auto-fit, minmax(auto, 1px)) 1fr Defines a size range greater than or equal to min and less than or equal to max.
If max < min, then max is ignored and
minmax(min,max)is treated as min.As a maximum, a
<flex>value sets the track’s flex factor; it is invalid as a minimum.
无论容器是否具有默认的 auto，这都可以正确地自动调整行的大小高度或 height/min-height定义。 demo
但它仍然没有解决最后一行的问题，因为 1fr仍然无效，并导致整个规则失败。 demo
这样的东西是有效的:
repeat(auto-fit, minmax(auto, 1px)) 10em 但是 auto-fit不按预期工作:10em应用于第二行。 demo
如果容器有 height，则规则不会按预期工作或 min-height定义。 demo
即使 CSS 网格布局现在广泛可用，Flexbox 在某些情况下仍然是更好的选择。
这用简洁明了的代码满足了您的所有要求:
article {
display: flex;
flex-direction: column;
height: 100vh;
}
section:last-child {
flex-grow: 1;
}
section {
/* flex-basis: auto <-- this is a default setting */
margin-bottom: 10px;
background-color: lightgreen;
}
body {
margin: 0;
}<article>
<section>text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text </section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
</article>
关于html - 具有可变数量的 "auto"行的 CSS 网格，但一行应占用 "1fr"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48339333/
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test
我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que