个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
26
4
我正在尝试制作一个不依赖于预设列数的网格。我创建了一个小样本来展示情况:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Grid in HTML5 and CSS3</title>
<style>
* {margin:0;padding:0;}
.row {display:block;position:relative;clear:both;}
.row>* {display:block;position:relative;clear:both;float:left;clear:none;width:100%;}
.row>*:empty {width:0px;}
/* one column in the row */
.row>:nth-last-child(1):nth-child(1) {width:100%;}
/* two columns in the row */
.row>:nth-last-child(2):nth-child(1) {width:50%;}
.row>:nth-last-child(1):nth-child(2) {width:50%;}
/* three columns in the row */
.row>:nth-last-child(3):nth-child(1) {width:33.33%;}
.row>:nth-last-child(2):nth-child(2) {width:33.33%;}
.row>:nth-last-child(1):nth-child(3) {width:33.34%;}
.row>:empty:nth-last-child(3):nth-child(1)+:not(:empty) {width:66.66%;}
.row>:empty:nth-last-child(2):nth-child(2)+:not(:empty) {width:66.67%;}
article {margin:.5em;border:1px solid green;border-radius:.3em;padding:.5em; }
</style>
</head>
<body>
<section class="row">
<div>
<article>
<p>This row has only one child.</p>
</article>
</div>
</section>
<section class="row">
<div>
<article>
<p>This row has two children</p>
</article>
</div>
<div>
<article>
<p>This is the second child</p>
</article>
</div>
</section>
<section class="row">
<div>
<article>
<p>
This row has three children
</p>
</article>
</div>
<div>
<article>
<p>So this is col 2 of 3</p>
</article>
</div>
<div>
<article>
<p>And this is col 3 of 3.</p>
</article>
</div>
</section>
<section class="row">
<div></div>
<div>
<article>
<p>The first child of this row is empty so spanned with the second</p>
</article>
</div>
<div>
<article>
<p>This is the second column</p>
</article>
</div>
</section>
<section class="row">
<div>
<article>
<p>This is the first column</p>
</article>
</div>
<div></div>
<div>
<article>
<p>The second and third column are spanned</p>
</article>
</div>
</section>
</body>
</html>
我在 jsfiddle 上放了一个更大的样本 - 更详细地描述了问题
http://jsfiddle.net/jordenvanforeest/MDv32/
我现在的问题是，如果您希望此网格容纳超过 3 列，则 CSS 大小会呈指数增长。所以我正在寻找其他解决方案。我试着做类似的事情
.row>:nth-last-child(an+b):nth-child(cn+d) {}
但是我的微积分技能有点生疏，无法正常工作。非常感谢您的帮助。
更新
thirtydot提供了一个使 CSS 更小的答案。这fiddle是他建议的改进版本。
仍然欢迎任何其他建议。我的 12 列网格仍然需要 30K 的跨度。
最佳答案
您可以使用 display: table 组合 with table-layout: fixed 来做类似的事情.
浏览器支持:http://caniuse.com/css-table (但这里的限制因素是 :not() and :empty )
参见: http://jsfiddle.net/thirtydot/MDv32/3/
如您所见，它们看起来几乎完全相同。凭借一些独创性，您应该能够使用我使用的技术复制演示中的大部分功能。我在我停止的演示中注释掉了 HTML。
CSS:
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.row > * {
display: table-cell;
}
.row > :empty {
display: none;
}
/* for example: */
.row > :empty + :not(:empty) + :last-child:not(:empty) {
width: 33.33%;
}
关于css - 我的网格数学辅助 : nth-child(an+b)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11340227/
26
4
0
Based on Deep Learning (2017, MIT) book. 本文基于Deep Learning (2017, MIT)，推导过程补全了所涉及的知识及书中推导过程中跳跃和省
因此，我需要一种方法来弄清楚如何获得5个数字，并且当您将它们中的任意两个相加时，将得出一个总和，您只能通过将这两个特定的数字相加而得到。 这是我正在谈论的示例，但有3个数字: 1个 3 5 1 + 3
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
如何将 a 和 b 之间的数字线性映射到 c 和 d 之间。 也就是说，我希望 2 到 6 之间的数字映射到 10 到 20 之间的数字...但我需要广义的情况。 我的脑子快炸了。 最佳答案 如果您的
嘿，我有一个方程式，我需要弄清楚它是基于图表的数学，其中图表上有两个点，需要获取其余值: 我正在构建一个 javascript 页面，它获取图表上的两个点，但需要吐出图表上的任何位置。 它用于根据了解
有谁知道如何用 Doxygen 得到实复场或射影平面的符号，i.o.w 符号，如 IR、IC、IP 等？ 例如，我尝试了\f$\field{R}\f$，但无法识别。 非常感谢您的帮助，G. 最佳答案
我正在使用 Segment to Segment 最接近方法，该方法将输出两个长度段之间的最近距离。每个段对应一个球体对象的起点和终点。速度只是从一个点到另一个点。 即使没有真正的碰撞，最近的方法也可
我有一个 arduino 连接到 Stradella 系统钢琴 Accordion 。我在左手和弦的 12 个音符中的每一个上都有光学传感器。当我弹奏和弦时，它会触发三个传感器。如果我想让合成器演奏和
我正在开发一个具有一些简单功能的新包。现在我可以使用已经存在的“math-vectors”库中的函数；特别是“插值”和“反转”。如何在我的新包中使用这些？编写 y:=reverse(...) 显然是不
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Integer division in JavaScript 希望这是一个简单的问题，基本上我需要这样做: 分隔线
我有一张表格，上面有学校类(class)。此表单上可以有任意数量的类，每个类有 2 个字段。书本费和学费。 我有一个名为总计的第三个字段，当他们在其他字段中输入成本时，我想更新该字段。 这就是我的设置
今天早些时候我问了一个类似的问题，结果发现我只是数学很烂，因为我也无法解决这个问题。 我通过宽度/高度计算屏幕比例。我需要一个函数来将结果数字转换为新的比例。 例如 function convertN
我有一个起始数字，因此必须仅在开始循环时将该数字乘以一个因子，然后将结果乘以另一个因子的 X 倍，然后必须将循环乘以 Y 次，最后我需要总金额...我认为最好查看数字来了解我需要什么 例如，如果我从数
现在我用 JAVA 遇到了一些问题，但不记得如何获取坐标系之间的长度。 例如。A 点 (3,7)B点(7,59) 我想知道如何计算a点和b点之间的距离。非常感谢您的回答。 :-) 最佳答案 A = (
我有两种类型的文本输入，积极的和可疑的。在将输入到这两种类型的输入中的所有数字相加后，我需要显示多组这些输入的总数。例如:2 个阳性 + 2 个可疑 = 总计:4 然后，我需要从总数中找出积极与可疑的
我正在尝试将输入金额乘以 3.5%，任何人都可以给我任何想法如何做到这一点吗？ $("#invest_amount").keyup(function() { $('#fee').va
有谁知道返回a的最大数的Math方法 给定的位数。 例如，使用1位数字的最大数字是9，2是99，3是999，4是9999......等等。 使用字符串很容易实现，但这并不完全 我在找什么。 pri
我是 Knockout 的新手，但仍对它一头雾水，我想知道如何使用两个 KO 变量进行简单的数学运算(加法和乘法)。 此刻我有: self.popInc1 = ko.observable('0.3')
我在谷歌地图应用程序中有以下内容，并希望显示转换为英尺的海拔高度，但如何向上/向下舍入到最接近的数字？ (消除小数点后的数字)我尝试了 number.toFixed(x) 方法，但似乎什么也没做。 f
我最近开始使用 JavaScript 编写小型 Canvas 游戏，并试图全神贯注于 Vector 2d 数学。我了解 Vectors 的基础知识(比如它们代表 2d 空间中具有方向的点，您可以对它们
我是一名优秀的程序员,十分优秀！