标签: css-multicolumn-layout

我发现了多列CSS,但是发现在打印这些样式时会被忽略.

这是一个已知的错误？或者我做错了什么？

div {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    font-size: 16px;
    line-height: 1.6;
    width: 760px;
}

@media print {
    button {
        display: none;
    }
}

<button onclick="print()">Print...</button>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed vehicula quam, ut placerat ipsum. Cras suscipit dui nisl, at pretium leo mollis sed. Vestibulum iaculis ultricies nulla at mattis. Ut at augue sed nulla mollis pellentesque. Nulla vel
    sollicitudin libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla …

我有一个简单的多列布局; 我想举一个元素上:hover使用translateY.

它会导致闪烁(在Chrome 57上测试).我该如何解决？

"use strict";

$(function () {
  var $target = $('.wall');

  function getImageUrl(id) {
    var width = 500;
    var height = 250 + Math.floor(Math.random() * 150);
    return "https://unsplash.it/" + width + "/" + height + "?image=" + id;
  }

  function addElement(element) {
    var $template = $target.find('.template').clone().appendTo($target).removeClass("template");

    $template.find("a").attr("href", element.post_url);

    $template.find("img").attr("src", getImageUrl(element.id));

    $template.find("figcaption").text(element.author);

    $template.removeClass("hide");
  }

  $.getJSON("https://unsplash.it/list", function (data) {
    var images = 12;
    var elements = [];

    function getRandomImage() {
      var id = Math.floor(Math.random() * data.length); …

Flexbox的一个问题是整行的高度变化以匹配其中的最大元素,因此无法实现砌体类型的布局.

我目前正在尝试将Semantic UI的card视图与CSS列而不是其cards类一起使用以避免此问题.

问题在于,Chrome似乎将卡片元素拆分为列中的各个位置,而Firefox将其渲染得很好.似乎break-insideCSS属性旨在解决此问题,但它似乎在Chrome中不起作用.

body {
    padding: 10px;
    width: 100%
}

.container {
    padding: 15px;
    -moz-column-count: 5;
    -moz-column-gap: 10px;
    -webkit-column-count: 5;
    -webkit-column-gap: 10px;
    column-count: 5;
    column-gap: 10px;
    width: 100%;
}

.container > .card {
    width: 90% !important;
    display: inline-block !important;
    margin-top: 0px !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid-column !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<div class="container">
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div …

我正在尝试使用column-countcss 属性div在 4 列中呈现s。

但是当列包装器中有 3n 个项目（3、6、9...）时，只有三列被填充，第四列是空的！

CSS：

.columns {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}
.item {
    display: inline-block;
    widtth: 100%;
    border: 1px solid red;
}

HTML：

<div class="columns">
<div class="item">Lorem ipsum dolor sit amet 1</div><div class="item">Lorem ipsum dolor sit amet 2</div><div class="item">Lorem ipsum dolor sit amet 3</div>
<div class="item">Lorem ipsum dolor sit amet 4</div><div class="item">Lorem ipsum dolor sit amet 5</div><div class="item">Lorem ipsum dolor sit amet …

我正在尝试编写灵活的代码，其中我有一个普通代码，<ul>它会为每 5 个元素自动创建另一列。我找到了一个实现此目的的教程，但将项目按水平顺序放置，而我需要垂直顺序。我看过其他一些输出垂直顺序的教程，但也附加了class="first"和class="second"到每个li不是我想要的。我希望使用我现有的 HTML 代码。

我想要的是：

-01     -06     -11   
-02     -07     -12
-03     -08     -13
-04     -09     -14
-05     -10     -15

我拥有的：

-01     -02     -03   
-04     -05     -06
-07     -08     -09
-10     -11     -12
-13     -14     -15

CSS：

ul {
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
}

li {   
    float:left;
    display:inline;
}

.double li  { width:50.0%; } /* 2 col */
.triple li  { width:33.3%; } /* 3 col */
.quad li    { …

我的CSS列在Chrome中的显示方式与它们在Firefox和IE9中的显示方式不同.这是Firefox中的正确显示:

以下是Chrome中显示错误的方式:

我已经尝试更改lito display: inline-block,这是Chrome中各种类型的改进,但随后较窄的列表项目出现在同一个"单元格"中.

h3, h4 {
    font-weight: bold;
    padding: 0.5em 0;
}
.results {
    margin-top: 1em;
    box-shadow: 0 0 20px #99AABB;
    background-color: white;
    border: 3px solid #CCCCCC;
    margin-left: 2.7em;
    padding: 0 1em;
    position: absolute;
    right: 2.5em;
    text-align: left;
    z-index: 10;
}
.results ul {
    -moz-column-count: 6;
    -moz-column-gap: 1em;
    -webkit-column-count: 6;
    -webkit-column-gap: 1em;
    column-count: 6;
    column-gap: 1em;
}
.results ul.articles {
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    column-count: 3;
    column-gap: 1em;
}

<div class="results"> …

这段代码在 Chrome/Firefox 中运行良好，但在 Safari 中，我的 3 列 div 下的内容比它应该下推的要远得多，就好像列内容被压缩在一个列中一样。

这可以在这里看到：http : //codepen.io/anon/pen/egxvqP

相关代码：

.postIntro {
  width: 100%;
  display: inline-block;
  margin-top: 18px;
  column-count: 3;
  column-gap: 30px;
  column-fill: balance;
}

使用 CSS 列，您可以跨多列包装图像和 div。例如，如果您设置这样的 CSS 文件：

html,
body {
    height: 100%;
}
body {
    overflow: hidden;
    margin: 0;
    background-color: orange;
}
#master-container {
    height: 100%;
    column-count: 2;
}
#child-container {
    height: 200%;
    width: 100%;
    background-color: cadetblue
}
.child-element {
    height: 33%;
    width: 100%;
    background-color: crimson;
    margin-bottom: 15px;
}

和这样的 HTML：

<!doctype html>
<html>

    <link rel="stylesheet" href="index.css">

<body>

<div id="master-container">
    <div id="child-container">
        <div class="child-element"></div>
        <div class="child-element"></div>
        <div class="child-element"></div>
    </div>
</div>

</body>

</html>

这是结果：https : //codepen.io/MichaelMC/pen/WpPOxo

我想使用 React-Native 在移动设备上实现相同的效果。有谁知道这个 CSS 列数魔法实际上是如何工作的？某种吃豆人/小行星风格的图形技巧？重复元素？

我需要在多列 div 中显示特定术语的工具提示，并且我需要它们跨多个浏览器工作。我从w3schools CSS Tooltip 示例开始，它在普通（单列）容器中效果很好。但是对于多列，Chrome 有一些严重的（也许不是破坏交易的）格式问题，而 Safari 失败得很厉害，将工具提示裁剪到它应该出现的列。Firefox 工作正常。

火狐：

铬合金：

苹果浏览器：

我想也许 Safari 正在处理溢出，好像它被设置为隐藏，但如果是这样，我找不到任何方法来改变它的行为。而且我找不到任何解决多列布局中工具提示格式问题的现有问题。

现在我担心我可能不得不硬着头皮编写自定义 javascript 来检测悬停，抓取工具提示的文本，将文本填充到浮动在我页面内容上方的 div 中，显示正确定位的 div与链接的关系，并在鼠标移出链接时再次隐藏它。显然，如果我可以让 w3schools 工具提示代码处理多列会容易得多。（使用表格或网格代替多列不适用于此项目。）

有没有其他人遇到（并希望解决）这个问题？

这是我的代码；如果你运行代码片段，你会看到上面的 div 显示了一个普通的单列 div，它可以在浏览器中正常工作；下面的 div 是生成上面屏幕截图的两列 div。

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 160%;
  left: 50%; …

我正在为此布局使用 CSS多列布局：

我希望内容使用尽可能多的列。它在上图中这样做，但是当只有 3 个项目时，它会执行以下操作：

我希望方框“3”位于方框“2”的右侧。那可能吗？

编辑：寻找通用解决方案（这是一个简化示例，我们事先不知道容器或元素的高度）。

编辑 2：如果有比使用多列（也许是网格？）更好的方法，我们会使用它。

这是 HTML/CSS（或这里的jsfiddle ）：

.container {
  column-width: 120px;
  column-gap: 20px;
  padding: 10px;
  width: 600px;
  height: 250px;
  border: 1px solid blue;
}

.item {
  
  background: #2371f3;
  padding: 5px;
  height: 100px;
  width: 100px;
  color: white;
  break-inside: avoid;
  /* Workaround for Firefox bug (https://stackoverflow.com/a/7785711/2223706) */
  overflow: hidden;
  border: 1px solid darkblue;
}

.longer {
  height: 220px; /* Decreasing this to 200px makes #2 and #3 no longer stack. */
}

<div …