个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我创建了 25 个随机宽度和高度的框，其中 width == height(如图所示)
$(document).ready(function(e) {
for (var count = 0; count < 5; count++) {
for (var iter = 0; iter < 5; iter++) {
$(".content").append("<div id='" + count + "_" + iter + "' class='box'><p>" + count + "_" + iter + "</p></div>");
$(".content div:last").width(Math.round((Math.random() * 100) + 50));
$(".content div:last").height($(".content div:last").width());
}
}
});.box {
background: #FF0004;
margin: 10px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="content">
</div>
</body>我试图更好地理解 float 属性逻辑以及 float 元素相互“堆叠”时定位背后的原因。例如(从 fiddle 中截取的屏幕截图):
是什么让3_3在屏幕变大的时候重新定位到如下图的位置？ 
根据 W3Schools:
If you place several floating elements after each other, they will float next to each other if there is room.
所以问题是，“room”是什么意思，控制 float 元素位置的逻辑是什么？
这个 SO 帖子的答案:CSS Float explanation似乎相关，但似乎无法解释为什么 float 元素会停在某个位置。
最佳答案
这是与您的问题最相关的链接答案部分:
When you float a block element, you are telling the browser to position it next to the previous floated object, so long as the container is wide enough (otherwise it will drop below the previous object).
正如作者所提到的，这是一种粗略的简化。 Section 9.5.1规范的一部分列出了所有精确的规则，但我不打算在这里引用全部内容，因为它是一本非常的长篇读物，并且只有某些点在这里是相关的。当我逐步了解您的 fiddle 中发生的事情时，我会引用相关要点。
比较您的两个屏幕截图。注意位置发生变化的两个框 3_2 和 3_3，以及它们周围的框 2_4、3_0 和 3_1。
之前
之后
当屏幕变大时，您为 3_2 腾出空间，使其从 2_4 旁边的原始位置向上移动到 3_1 旁边:
- A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
- A floating box must be placed as high as possible.
- A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
这又为下一个 float 框腾出空间，以尽可能向上和向左占据空间，遵循与上述相同的规则。结果，3_3 向上 float ，在 3_2 附近停止，然后它沿水平轴尽可能向左浮动，在 2_4 附近停止。请注意，尽管看起来 3_3 应该能够容纳在 2_4 和 3_2 之间，但事实并非如此，因为必须考虑边距(这就是上面“外边缘”的意思)。
此时，以下元素适用，除了上面的第 8 项和第 9 项:
- If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
- The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
由于 3_3 太大，它从第一行 float 框创建了一个明显的向下突出。这有效地增加了第一行的高度。 3_3 之后的所有其他 float 元素必须保留在自己的行中，并且第二行 float 元素不得与 3_3 的底部边距边缘相交。这主要由元素 #5 管理。
关于html - CSS float 逻辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30858717/
25
4
0
当我尝试加载库 Raster 时，我收到如下错误: 错误:inDL(x, as.logic(local), as.logic(now), ...) 中的“raster”的包或命名空间加载失败:无法加载
当我尝试加载库 Raster 时，我收到如下错误: 错误:inDL(x, as.logic(local), as.logic(now), ...) 中的“raster”的包或命名空间加载失败:无法加载
望着help section about_Comparison_Operators of PowerShell我是这样理解的: PS C:\> $false,$false -eq $true PS C
我刚刚修改了旧代码，现在似乎没有任何效果。请您指导我哪里出错了。 一些不起作用的事情是: 以前，焦点始终停留在屏幕上唯一的输入字段上。 (现在不行了)，代码中的 if else 条件也不起作用。 On
请帮我找到一个使用普通 'ol javascript 的解决方案(我无法使用外部框架)。此外，CSS :hover 选择器不适用于现实世界的实现。 注册事件发生的事情设置所有调用最后注册事件数组项。
我想创建一个软件来为残障 child 交通规划公交路线(及其最佳载客量)。 这些总线具有以下规范: m 个座位(最多 7 个 - 因为有司机和助理) o 轮椅“座位”(最多 4 个) 固定的最大负载量
有人能帮我吗？似乎我的 for 逻辑根本不起作用，因为它一直在上午 12:00 返回我的开始时间 这是我的代码 Sub forlogic() Dim i As Single Dim t
我正在尝试设置 OR两个切片器过滤器之间的逻辑。两个切片器来自相同的数据集。以下是更多详细信息: 我的源表: 带切片器的视觉效果: 我的目标是，如果我从切片器 1 和切片器 2 中选择任何值，我的视觉
我有以下 C 语句: int res = x & (x ^ y); 有没有办法做同样的事情，但每次只使用一次x和y？ 例如: x | (~x & y) == x | y 最佳答案 是的，通过扩展 xo
我正在创建 Azure 逻辑应用程序以将新的 Sharepoint 文件添加到 Azure Blob。 Sharepoint 由我的公司运行，我使用我的凭据登录来为逻辑应用程序创建 Sharepoin
我有一个问题要求为给定函数合成最简单的乘积表达式总和。基本上，如果 AB == CD，则函数为 1，否则为 0，结果如下: (!A && !B && !C && !D) || (!A && B &&
我正在尝试确定是否可以在不溢出的情况下计算两个 32 位整数的总和，同时仅使用某些按位运算符和其他运算符。因此，如果整数 x 和 y 可以相加而不会溢出，则以下代码应返回 1，否则返回 0。 ((((
处理乍一看需要许多嵌套 if 语句的复杂业务逻辑的好方法是什么？ 例子: 折扣券。可能: 1a) 超值折扣 1b) 百分比折扣 2a) 正常折扣 2b) 累进折扣 3a) 需要访问优惠券 3b) 不需
假设我有一个“numbers”对象数组，其中包含“startNo”整数和“endNo”整数。 数组中可以有多个“数字”，我想获取一个包含修改对象的新数组，该数组仅具有不重叠的范围。 例如:如果数组有:
我在这个问题上遇到了困难。我正在使用 JavaScript。 我有一个文本区域，用于检测 @ 输入并将其位置存储在数组中。 var input = "@a @b @c" //textarea var
默认 IN 使用 OR 基本逻辑。有没有办法在范围内使用 AND 基本逻辑。 例如下面的查询 SELECT ItemId,CategoryID FROM ItemCategories WHERE Ca
我想在您将鼠标悬停在网站图像上时添加叠加层。我在这里实现了这个，它工作正常http://jsfiddle.net/stujLbjh/ 这是js代码: var divs = document.query
这个问题在这里已经有了答案: Which is faster: x>2 是否比 x>>31 快？换句话说，sar x, 2 是否比 sar x, 31 快？我做了一些简单的测试，他们似乎有相同的速度
我有grails criteriaQuery，我在这里再次检查OR逻辑，就像这样一个状态变量: or { eq("status", Status.ONE) eq("status",
我有grails criteriaQuery，我在这里再次检查OR逻辑，就像这样一个状态变量: or { eq("status", Status.ONE) eq("status",
我是一名优秀的程序员,十分优秀！