程序员经验分享-hwhale

当列数小于列数时，Chrome 列会出现错误

2023-12-10

我在使用 Chrome 时遇到问题column-count财产。我有一个 div，里面有一些项目，所以我设置column-count: 3;当我有 3 个或更多项目时，它效果很好，但是当我只有两个项目时，它们不会显示在同一行中，而是显示在同一列中。这种情况仅发生在 Chrome 上。

代码示例：

.userinfo-content .grid-view.author-profile-tabs {
  .column-count(3);
  .column-gap(30);
  .article {
    position:relative;
    display: inline-block;
    margin-bottom: 40px;
    width: 100%;
    line-height: 1.3;
  }
}

enter image description here


根据您的标记的外观，break-inside: avoid-column;应该解决这个问题，同时使用display: block代替display: inline-block（你可以删除width: 100%)

.outer {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
}

.inner {
  position: relative;
  display: block;
  margin-bottom: 40px;
  line-height: 1.3;
  break-inside: avoid-column;
}

.inner:nth-child(even) {
  background: lightgray;
}
<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

根据评论更新

在这种情况下，要打败它底边距问题，你需要一个包装器，这样你就可以给outer负数margin-top，然后你使用margin-top在物品上而不是margin-bottom.

.outer {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  margin-top: -30px;
}
.inner {
  position: relative;
  display: block;
  margin-top: 30px;
  line-height: 1.3;
  break-inside: avoid-column;
}

.inner:nth-child(even) {
  background: lightgray;
}
<div class="wrapper">
  <div class="outer">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
  </div>
</div>

如果您想要 3 列布局，flexbox做得更好并且有更好的浏览器支持

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 20px;
}

.inner {
  width: calc(33.33% - 20px);
  margin: 0 20px 20px 0;
  line-height: 1.3;
}

.inner:nth-child(even) {
  background: lightgray;
}
<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

Googlechrome

columncount

cssmulticolumnlayout

当列数小于列数时，Chrome 列会出现错误 的相关文章

  • Phonegap Cordova Statusbar 插件创建双栏

    我正在开发一个使用phonegap 的应用程序 通过 CLI 构建 而不是 PhoneGap 构建 我的 cordova plugin statusbar 插件有问题 打开时它将增加额外的条高度 这是它的样子 双高菜单栏 我通过两种方式实现

  • SVG - 可以在一侧添加笔画破折号渐变或透明形式

    我创建了一个 SVG 动画 在其中允许中风虚线阵列移动 我是否可以在中风破折号数组的尾部添加渐变并保持一侧透明 如示例中所示 svg main width 700px margin 30px auto position relative s

  • Node.js 可以调用 Chrome 吗？

    在桌面上运行的 Node js 是否可以生成 Chrome 浏览器窗口 我想启动一个 Chrome 浏览器 在 Node js 收到事件时提供窗口大小和位置 sys shell 命令只是方法吗 在 MacOS 上 var childProc

  • 为什么这个 chrome.browserAction.setIcon 方法不起作用？

    我正在查看文档页面 https developer chrome com extensions browserAction method setIcon我不知道我的代码有什么问题 chrome browserAction setIcon d

  • window.alert() 之后无法编辑输入文本字段

    我有这个 Electron 应用程序 使用 NodeJS Bootstrap AngularJS 其中包含一些可以编辑的文本输入字段 我有一个触发 window alert 的按钮 触发后 文本输入字段将不再可编辑 单击应用程序的其他元素不

  • 在网络上使用多种颜色的背景

    抱歉 如果标题有点误导 我想做的是用真正的浅灰色覆盖索引页面的背景 除了显示我的内容的部分 div class col sm 1 div div class col sm 8 div div class col sm 3 div 我希望 c

  • Bootstrap 切换导航项在单击后保持打开状态

    我有简单的 Bootstrap 3 切换导航 ul class nav navmenu nav clearfix li class navmenu brand dropdown clearfix a href class dropdown

  • BigVideo.js 播放结束时 URL 重定向

    我已经使用基于 Video js 的 BigVideo 在页面上实现了背景视频 单击 div 时 视频会在后台播放 我一生都无法弄清楚如何在视频播放完毕后重定向到另一个 URL 这是我正在使用的代码 视频播放链接 a href vids g

  • 使用 div 标签定位元素

    div class HeaderLink div class HeadPanelElement a href Blog a div div

  • 通过使用 Jquery 添加类来触发 CSS3 转换

    目前我有一个正在运行的小提琴 当我向它添加一个类时 我试图让 css3 不透明过渡触发 基本设置是我单击一个按钮 然后通过 jquery 添加一个 div 到 dom 然后将该元素添加到 dom 然后向其中添加一个类 向该新 dom 元素添

  • 创建由线连接的 CSS3 圆圈

    我必须在 CSS 中实现以下圆形和线条组合 并且我正在寻找有关如何有效实现此功能的指示 圆圈和线条应如下所示 我能够这样实现圆圈 span step background ccc border radius 0 8em moz border

  • DOM更改后刷新浏览器悬停效果

    我有一个 css 已更改的元素 hover 我还有一些 javascript 可以改变元素的高度 但是如果 javascript 在 hoverstate 处于活动状态 即使高度变化将元素从鼠标下方移出 状态仍保持不变 另外 由于 java

  • 从 Chrome 扩展程序中设置活动页面中的值活动输入

    I wrote an extension for Chrome I want when I click on button from my extension the value abc will be set into active in

  • 超大图像缩小后变得模糊

    这是我第一次尝试响应式设计 所以如果这是一个愚蠢的简单问题 请原谅 我创建了一个图像并将其最大宽度设置为不大于图像的实际宽度 因为我知道放大图像会导致模糊不清 我有点困惑的是 当我缩小窗口并且图像开始缩小时 它也变得模糊 这是正确的行为吗

  • Cookie 过期时间格式

    我从谷歌浏览器的 Cookies 文件和其中的一列创建了数据库cookies表是expires utc 该列的格式类似于 13169399213145330 这更像是unix时间 但是当我尝试使用 unix 时间转换器时 它给出了错误的值

  • jquery菜单栏浮动顶部

    我试图使菜单栏不断浮动在浏览器的顶部 因此当他们向下滚动页面时 菜单栏仍位于顶部 我该怎么做呢 Regards CSS 标签position fixed 即使滚动 也会使其保持在屏幕上的同一位置 使用它 然后将其定位为top right b

  • Jquery toggle() 函数无法与hoverwords() 滑动字母扩展一起使用

    我有 2 个 div 每 3 秒切换一次 现在 对于 div 中的文本 我使用一个名为 滑动字母 的扩展 正如您在此处提供的演示中看到的那样 http tympanus net Development SlidingLetters http

  • CSS class 和 id 同名

    css class 和 id 同名有什么问题吗 就像文章 帖子页脚的 footer 和页面页脚的 footer 一样 不 完全可以接受 一个类是使用 a 来定义的 并且 ID 是使用定义的 因此 就浏览器而言 它们是两个完全独立的项目 唯一

  • CSS 3 nth 类型仅限于类 [重复]

    这个问题在这里已经有答案了 有没有办法限制 CSS 3nth of type去上课 我有一个动态数量section具有不同类别的元素指定其布局需求 我想抓住三分之一 module 但似乎nth of type查找类元素类型 然后计算类型 相

  • 有两个切边的矩形

    我不确定这个形状的具体名称是什么 但我可以将其称为 半平行四边形 吗 我想纯粹使用这个形状CSS CSS3 有什么帮助吗 或教程 您可以使用伪元素来完成此操作 如下所示 做法是从盒子的左下角和右上角剪出一个三角形 只要主体背景是纯色 此方法

随机推荐

  • Clojure Ring/Compojure REPL 中的动态处理程序更新

    我使用以下命令创建了一个新的 Compojure Leiningen 项目lein new compojure test Web 服务器运行于lein repl进而 user gt use ring adapter jetty user g

  • -m 开关的用途是什么？

    你能向我解释一下调用和调用之间有什么区别吗 python m mymod1 mymod2 py args and python mymod1 py mymod2 py args 看来在这两种情况下mymod1 py被称为和sys argv

  • AEM 中基于资源解析器的 URL 映射

    我们有以下网站结构 content mysite en home testlevel1page testlevel2page 现在的要求是映射 http www mysite com gt content mysite en home ht

  • 如何使用 JSTL 从 JSON 字符串输出值？

    我正在使用 JBoss 7 1 3 As Final 并正在构建 Spring 3 2 11 RELEASE Web 应用程序 在我的 JSP 页面上有这个 jsonString 我想知道的是假设这个 json 字符串有一个属性 name

  • 查找对象的对象中属性的最大值

    我有一个这样的对象 const users adam age 28 extraInfo foobar brad age 31 extraInfo foobar jef age 12 extraInfo baarfoo 如何检查哪个对象具有最

  • 使用 HttpWebRequest 的 HTTP POST

    我正在尝试发布一些数据 就像我在 HTML 网站上使用 FORM 一样 ContentType multipart form data 目标是亚马逊的s3 我正在使用 HttpWebRequest HttpWebResponse 一切对我来

  • 如何在 Swift 3 中将自定义类保存为 CoreData 实体的属性？

    I have a CoreData Entity SavedWorkout It has the following attributes completionCounter是一个数组Bool and workout是一个名为的自定义类Wo

  • 将基于回调的异步方法转换为可等待任务的最佳方法

    转换 包装使用回调返回 可等待 任务的 经典 异步方法的最佳方法是什么 例如 给出以下方法 public void GetStringFromUrl string url Action

  • 带边框的透明窗口

    我正在尝试制作一个小型屏幕截图程序 我正在制作一个带边框的小型 WPF 窗口 这应该起到 视口 的作用 因此窗口内 边框内 的所有内容都应该是屏幕截图 然而 当我将窗口的透明度设置为 0 时 我看不到边框 关于如何使我的网格完全透明 并且仍

  • 另一个 nginx 入口重写目标问题

    我有一项服务和一个带有 kubernetes nginx 入口控制器的入口资源 我想要 student我的 url 的路径 用于转到应用程序的根目录并匹配以下的任何其他 url 段student 例如 http example com st

  • 有条件的发布事件

    介绍 我正在使用 sails 构建一个私人消息系统 但这个问题几乎适用于任何事情 我将使用消息系统作为示例来使问题更清楚 作为一些背景信息 我正在使用最新的 sails 0 10 RC 问题 Sails 允许您使用 redis 进行会话和

  • 使用 char[] 生成 MD5 哈希值

    如何转换使用此方法获得的 char 密码 char password passwordInputField getPassword MD5 哈希值 通常我会使用下面的方法 但 getBytes 仅与字符串兼容 MessageDigest m

  • 如何仅删除以“//”开头的 JavaScript 注释？

    首先澄清一下 我已经有了一个压缩工具 可以成功压缩其他所有内容 因此我不需要漫长而复杂的压缩工具preg replace正则表达式 只是一个简单的preg replace or str replace规则就可以了 我只想删除以 开头的 Ja

  • 当 iframe 调用站点时，会话不起作用

    我有第一个网站https www mydomain1 com我在其中使用 PHP 会话 没问题 一切正常 当我从一个页面转到另一个页面时 我可以访问我的会话变量 我有第二个网站https www mydomain1 com我通过 ifram

  • Android facebook 图表批处理 api

    我正在尝试使用图批量API 有参考代码吗 我们如何设置 参数 有没有人参考android应用程序使用过batch api 我在用这个链接我还使用过单独的图形 API 例如 fbApiObj request me notifications

  • 确定向量中每个唯一元素的出现次数

    如何确定 MATLAB 向量中某个值的相对频率 vector 2 2 2 2 1 1 1 2 2 1 1 1 2 2 2 2 1 2 什么函数将返回每个唯一元素出现的次数 您可以使用unique结合histc以获得相对频率 A 1 2 3

  • 为什么 pySerial 不写入我的程序内部？

    所以我在我的arduino nano上设置了一个程序 它从串行端口读取一个字节 并根据收到的字节是1还是0来打开LED 我在串行监视器和在 python 3 shell 中使用 pySerial 它工作得很好 但是当我有一个像这样的简单程序

  • Bootstrap Sass 与 Rails 4

    我正在尝试在我的rails 4 0 0 项目中使用bootstrap sass 3 1 0 2 和sass rails 4 0 1 我的 application css scss 文件如下所示 This is a manifest file

  • 管理多个开发人员的 sys.path

    我面临的问题虽小但很烦人 一位同事正在开发版本控制系统 X VCS X 中的一个项目 另一位同事正在另一个版本控制系统 Y 中工作 并使用来自 X 的软件包 不幸的是 VCS X 中的同事使用本地导入并使用修改他的路径sys path ap

  • 当列数小于列数时，Chrome 列会出现错误

    我在使用 Chrome 时遇到问题column count财产 我有一个 div 里面有一些项目 所以我设置column count 3 当我有 3 个或更多项目时 它效果很好 但是当我只有两个项目时 它们不会显示在同一行中 而是显示在同一

热门标签