搜索
搜索

当一个div图像换行时，可以像对待跨度一样对待换行吗？

Chris Wilson 发表于 Dev
20
克里斯·威尔逊

我有div完整的图像：

.species {
  background-color: lightblue;
  margin-top: 20px;
  display: inline-block;
}
.animals {
  display: inline;
  margin: 0;
  margin-right: 25px;
  margin-top: 5px;
}
.animal {
  width: 25px;
  padding: 8px 2px 0 2px;
  display: inline;
}
<div class="species">
  <div class="animals">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <img class="animal" src="ant.png">
    <!-- imagine about 30 more ants -->
  </div>
</div>

由于我的内容仅限于600px，因此.animals包含蚂蚁的div（）会自动换行，如下所示：

在此处输入图片说明

但是我希望它像<span>最后一个蚂蚁一样包裹起来，像这样（在照片编辑器中创建）：

在此处输入图片说明

但是，如果我给父级<div>内联显示或将其更改为span，则父级不会扩展到height图像的，因此得到以下信息：

在此处输入图片说明

小提琴的例子

所以我的问题是：是否有可能在divs和spans之间获得两全其美的效果，即容器的大小height与图片的大小相同，但不会扩展到width最后一行的页面大小？

我尝试了各种CSS命令来包装文本和空格，但无济于事。

pa

设置background到img，而是和你不需要有第二次DIV父.animals

.species {
  width: 600px;
  /* as you mentioned in your question */
  margin-top: 20px;
   font-size: 0
  /* fix inline(-block) gap */
}
.animal {
  width: 25px;
  padding: 8px 2px 0 2px;
  background-color: lightblue;
}
<div class="species">
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />
  <img class="animal" src="http://i.stack.imgur.com/h5bLb.png" />

  <!-- imagine about 30 more ants -->
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

像目录一样对待网页

Firestore交易是否像串行队列一样对待？

像正常争论一样对待自己

像对待比特流一样对待任何文件进行加密/解密

你能像对待任何其他元素一样对待 <i> 元素吗？

我们可以像对待Big O一样估算Big Omega吗？

我可以用vim对待.hive文件的方式与对待.sql一样吗？

如何像对待PHPStorm中的php语法突出显示一样对待.tpl语法突出显示

有什么方法可以使Resharper像Debug.Assert一样对待Trace.Assert？

如何在JSP页面中将XML标签像纯文本一样对待

像循环内的数组一样对待字符串-Javascript

如何像列表一样对待字节数组？

如何让eclipse像Java文件一样对待没有扩展名的文件？

gc是否会像处理__del__一样对待Cython的__dealloc__？

在Javascript源代码中，不间断空格是否总是像空白一样对待？

像对待带有参数和选项的命令一样分析字符串

为什么在Rails中将请求参数如1duh像1一样对待？

如何将函数像红宝石中的对象一样对待？

像Android一样的UITextView自动换行

是否可以使内联块元素像内联文本一样自动换行？

在Eclipse中像对待另一种文件类型一样处理格式和语法突出显示？

是否存在启动其他命令的命令如何将外壳结构像重定向一样对待的标准？

我想在可移动div内制作一个像窗口一样的div

我想为图像创建一个像循环一样自动滚动的 CollectionView

我可以像使用函数一样创建一个重复的类吗

如何创建一个可以像 module.subsection.function() 一样使用的模块？

是否可以像 Sass 一样在 JSS 中创建一个变量

awk可以基于第一个值以不同的方式对待记录中的值吗？

搜索一个像字典一样的namedtuple

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    用日期数据透视表和日期顺序查询

  3. 3

    应用发明者仅从列表中选择一个随机项一次

  4. 4

    Java Eclipse中的错误13，如何解决？

  5. 5

    在Windows 7中无法删除文件（2）

  6. 6

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  7. 7

    套接字无法检测到断开连接

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    有什么解决方案可以将android设备用作Cast Receiver？

  10. 10

    Mac OS X更新后的GRUB 2问题

  11. 11

    ggplot：对齐多个分面图-所有大小不同的分面

  12. 12

    验证REST API参数

  13. 13

    如何从视图一次更新多行（ASP.NET - Core）

  14. 14

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  15. 15

    计算数据帧中每行的NA

  16. 16

    检索角度选择div的当前值

  17. 17

    离子动态工具栏背景色

  18. 18

    UITableView的项目向下滚动后更改颜色，然后快速备份

  19. 19

    VB.net将2条特定行导出到DataGridView

  20. 20

    蓝屏死机没有修复解决方案

  21. 21

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

热门标签

归档