我正在尝试为以下布局创建 CSS。这与表格非常相似，但我使用它来呈现不包含表格数据的 XML。
我想要两列或多列以及贯穿这些列的一条或多条水平线(不可见线)。规则之间的垂直间距与表格的行高完全一样，由该行单元格中内容的最大高度决定。
此“表格”中的所有“单元格”都包含两个可选 block 。上面的 block 在上面的规则下方对齐。下面的 block 在下面的规则上方对齐。这是一个例子:
上面和下面的 block 都是可选的，因此每个“单元格”都将具有以下配置之一。 block 没有固定的高度；它们可能包含根据“单元格”的宽度换行的文本。
因为这很像一张 table ，所以我尝试用 display:table 渲染它.第一个问题:如何在单个 table-cell 中同时创建上下 block ？这是我的 first attempt .
我认为这相当于在其容器底部“ float ”一个方 block 的问题。 this question 的公认答案这表明这可能是不可能的。
XML 片段
这是我尝试呈现的 XML 的简化示例。
<block>
<horizontal-rule>
<column>
<above-rule>When in the Course of human events</above-rule>
</column>
<column>
<above-rule>to dissolve the political bands</above-rule>
<below-rule>it becomes necessary for one people</below-rule>
</column>
<column>
<below-rule>which have connected them with another</below-rule>
</column>
</horizontal-rule>
</block>
为了让它发挥作用，我一直在尝试修改我的原始 XML 架构。在这第二个 XML 示例中，我没有按相邻的水平规则分组，而是尝试了一种更像“表格”的按行分组。在翻译中，<above-rule>变成 <cell-bottom>和 <below-rule>变成 <cell-top> .我更喜欢原来的那个，但我在这个上取得了更大的进步。
<block>
<row>
<cell>
<cell-bottom>When in the Course of human events</cell-bottom>
</cell>
<cell>
<cell-top>it becomes necessary for one people</cell-top>
<cell-bottom>to dissolve the political bands</cell-bottom>
</cell>
<cell>
<cell-top>which have connected them with another</cell-top>
</cell>
</row>
</block>
一个非常丑陋的解决方案
我有一个想法特别难看。我可以修改我的 XML 模式并需要整个 XML <block>以完全相同的内容重复两次。然后我把 <block> 的两个副本都放在在包装元素中 <block-wrapper>并且我为包装器的第一个子项和包装器的最后一个子项定义了单独的样式。
第一个子元素在顶部对齐单元格内容并隐藏 <bottom> block 。最后一个 child 对齐底部的单元格内容并隐藏 <top> block 。
我使用 position:absolute使两个呈现的表格完全重叠。
这是一个 implementation of this idea .
问题
display:table一个聪明的方法？最佳答案
您不必使用表格。试试这个(仅在 Chrome 中测试):
<html>
<head>
<title>CSS</title>
</head>
<style type="text/css">
div {
float: left;
width: 100px;
margin-left: 10px;
margin-right: 10px;
border-width: 1px;
border-style: solid;
visibility: visible;
height: 50%;
background-color: white;
position: relative;
}
div div {
background-color: grey;
z-index: 3;
}
div#OUTER {
width: 100%;
display: block;
height: 600px;
border: 0;
}
span { background-color: white; width: 100%; }
.line { width: 100%; visibility: visible; z-index: 5; }
.top { position: absolute; top: 10%; }
.bottom { position: absolute; bottom: 10%; }
.red-line { border: solid 2px red; }
.blue-line { border: solid 2px blue; }
.top-line { position: absolute; top: 2%; }
.bottom-line { position: absolute; bottom: 50%; }
</style>
<body>
<div id="OUTER" style="">
<hr class="line red-line top-line" />
<hr class="line blue-line bottom-line" />
<div>
<span class="top">11111<br>111111<br>111111111</span>
</div>
<div>
<span class="bottom">22222</span>
</div>
<div>
<span class="bottom">33333<br>33333<br>33333</span>
</div>
<div>
<span class="top">44444<br>44444<br>4444<br>4444</span>
<span class="bottom">55555<br>555555<br>5555<br>5555</span>
</div>
</div>
</body>
</html>
关于html - CSS:包含与水平规则对齐的 block 的多列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19735908/
我想将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
我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere
在我的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并在看到包时选择
我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m
我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我没有理解以下行为(另请参阅inthisSOthread):defdef_testputs'def_test.in'yieldifblock_given?puts'def_test.out'enddef_testdoputs'def_testok'endblock_test=procdo|&block|puts'block_test.in'block.callifblockputs'block_test.out'endblock_test.calldoputs'block_test'endproc_test=procdoputs'proc_test.in'yieldifblock_gi