个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我遇到了一个 float 元素的问题，我不太明白。显示问题比解释问题容易，因此我创建了两个示例来演示输出如何根据您放置 float 元素的顺序而有所不同。
示例 #1
HTML:
<body>
<div class="float-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate metus velit, at mattis orci consectetur sit amet. Etiam tellus risus, ornare at tellus sit amet, suscipit aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue odio non massa vehicula convallis. Nullam maximus diam eu lectus pellentesque, et imperdiet erat fringilla.</p>
</div>
<figure>
<img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="TMNT!" alt="TMNT 90's logo" />
<figcaption>TMNT logo from the 90's</figcaption>
</figure>
</body>
CSS
div {
width: 300px;
}
img {
height: 200px;
width: 200px;
}
.float-right {
float: right;
}
figure {
height: 200px;
width: 200px;
border: 1px solid black;
}
输出:http://jsfiddle.net/4yw8ga68/3/embedded/result/
这里有一个包含段落的 div 向右浮动。这个 div 后面是一个包含图像和标题的图形元素。在输出中，您可以看到 div 一直向右浮动，因此图像位于页面的左上角。
示例 #2
HTML:
<body>
<figure>
<img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="TMNT!" alt="TMNT 90's logo" />
<figcaption>TMNT logo from the 90's</figcaption>
</figure>
<div class="float-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate metus velit, at mattis orci consectetur sit amet. Etiam tellus risus, ornare at tellus sit amet, suscipit aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue odio non massa vehicula convallis. Nullam maximus diam eu lectus pellentesque, et imperdiet erat fringilla.</p>
</div>
</body>
CSS
div {
width: 300px;
}
img {
height: 200px;
width: 200px;
}
.float-right {
float: right;
}
figure {
height: 200px;
width: 200px;
border: 1px solid black;
}
输出:http://jsfiddle.net/4yw8ga68/5/embedded/result/
这段代码和第一段一样，只是 float 的div放在了figure和image之后。在此示例中，div 显示为向右浮动，但由于图像的原因而向下倾斜。
我的问题是，为什么第二个例子的输出不同？我希望输出与第一个示例相同，考虑到图像和图形只有 200 像素宽，并且 float div 仍然有足够的空间一直 float 到页面的右侧和顶部。
如有任何帮助，我们将不胜感激。谢谢!
最佳答案
这是因为当第一个元素 float 时，它后面的任何元素都会填充空间。
但是，如果只有第二个元素是 float 的，那么它对第一个元素没有任何影响，因为它不在第二个元素之后。
如果你想达到与第一个代码相同的效果但保留你的第二个 HTML 结构，那么你需要向 <figure> 添加一个 float 属性。元素，因此:
figure {
height: 200px;
width: 200px;
border: 1px solid black;
float: left;
}
这是一个 JSfiddle:http://jsfiddle.net/4yw8ga68/6/
关于html - float 元素的排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26748132/
24
4
0
我正在尝试对每个条目有多个值的关联数组进行排序。 例如 [0] => stdClass Object ( [type] => node [sid] => 158 [score] => 0.059600
我在 mysql 中有“日期”列以这种格式保存日期 2014 年 9 月 17 日(日-月-年) 我需要对它们进行升序排序，所以我使用了这个命令: SELECT * FROM table ORDER
我目前正在将 MySQL 存储过程重写为 MS SQL 存储过程，但遇到了问题。 在 MySQL 存储过程中，有一个游标，它根据最近的日期 (effdate) 选择一个值并将其放入变量 (thestt
我想要 gwt r.QuestionId- 排序。但是我得到未排序的 QuestionId 尽管我提到了 QuestionId ASC 的顺序。 SELECT r.QuestionId,
我有一个关于在 scandir 函数中排序的基本问题。到目前为止，我阅读了 POSIX readdir 的手册页，但没有找到有关订购保证的具体信息。 但是当我遍历大目录(无法更改，只读)时，我在多个系
基本上我必须从 SQL 数据库中构建项目列表，但是用户可以选择对 7 个过滤器的任意组合进行过滤，也可以选择要排序的列以及按方向排序。 正如您可以想象的那样，这会以大量不同的组合进行编码，并且数据集非
我有两张 table 。想象第一个是一个目录，包含很多文件(第二个表)。 第二个表(文件)包含修改日期。 现在，我想选择所有目录并按修改日期 ASC 对它们进行排序(因此，最新的修改最上面)。我不想显
我想先根据用户的状态然后根据用户名来排序我的 sql 请求。该状态由 user_type 列设置: 1=活跃，2=不活跃，3=创始人。 我会使用此请求来执行此操作，但它不起作用，因为我想在“活跃”成员
在 C++ 中，我必须实现一个“类似 Excel/Access”(引用)的查询生成器，以允许对数据集进行自定义排序。如果您在 Excel 中使用查询构建器或 SQL 中的“ORDER BY a, b,
我面临这样的挑战: 检索按字段 A 排序的文档 如果字段 B 存在/不为空 . 否则 按字段排序 C. 在 SQL 世界中，我会做两个查询并创建一个 UNION SELECT，但我不知道如何从 Mon
我想对源列表执行以下操作: map 列表 排序 折叠 排序 展开 列表 其中一些方法(例如map和toList)是可链接的，因为它们返回非空对象。但是，sort 方法返回 void，因为它对 List
我制作了一个用于分析 Windows 日志消息编号的脚本。 uniq -c 数字的输出很难预测，因为根据数字的大小会有不同的空白。此时，我手动删除了空白。 这是对消息进行排序和计数的命令: cat n
我有以下词典: mydict1 = {1: 11, 2: 4, 5: 1, 6: 1} mydict2 = {1: 1, 5: 1} 对于它们中的每一个，我想首先按值(降序)排序，然后按键(升序)排序
我刚刚开始使用泛型，目前在对多个字段进行排序时遇到问题。 案例: 我有一个 PeopleList 作为 TObjectList我希望能够通过一次选择一个排序字段，但尽可能保留以前的排序来制作类似 Ex
有没有办法在 sql 中组合 ORDER BY 和 IS NULL 以便我可以在列不为空时按列排序，但如果它为null，按另一列排序？ 最佳答案 类似于: ORDER BY CASE WHEN
我有一个包含 2 列“id”和“name”的表。 id 是常规的自动增量索引，name 只是 varchar。 id name 1 john 2 mary 3 pop 4 mary 5 j
场景 网站页面有一个带有分页、过滤、排序功能的表格 View 。 表中的数据是从REST API服务器获取的，数据包含数百万条记录。 数据库 REST API 服务器 Web 服务器 浏览器 问
假设我有一本字典，其中的键(单词)和值(分数)如下: GOD 8 DONG 16 DOG 8 XI 21 我想创建一个字典键(单词)的 NSArray，首先按分数排序，然后按字
如何在 sphinx 上通过 sql 命令选择前 20 行按标题 WEIGHT 排序，接下来 20 行按标题 ASC 排序(总共 40 个结果)，但不要给出重复的标题输出。 我尝试了这个 sql 命令
我有一个奇怪的问题，当从 SQLite 数据库中选择信息并根据日期排序时，返回的结果无效。 我的SQL语句是这样的: Select pk from usersDates order by dateti
我是一名优秀的程序员,十分优秀！