标签: css-multicolumn-layout

我有一个无序列表,我想拆分成列,所以我column-count在父div上使用CSS :

<h1>Mushrooms:</h1>
<div style="column-count:4">
  <ul>
    <li>Porcini</li>
    <li>Shittake</li>
    <li>Button</li>
    <li>Chestnut</li>
    <li>Oyster</li>
    <li>Portobello</li>
    <li>Crimino</li>
    <li>Chanterelle</li>
    <li>Morels</li>
    <li>Enoki</li>
  </ul>
</div>

但是,由于某些原因,这会在第一列的第一行留下一个空行:

如何让我的专栏整洁干净？

有一个JSFiddle

我在使用该column-count属性时遇到Chrome问题.我有一个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;
  }
}

这适用于FF/Chrome/Opera和IE 10+,但不适用于IE9; 我正在寻找IE9解决方案

以下CSS将使一组div,span或p标签自组织成可以水平滚动的整齐列(仅适用于支持WebKit的浏览器).

-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;

这是一个例子:

$(document).ready(function() {


  $(".RightArrow ").click(function() {
    $(".columns").animate({
      scrollLeft: '+=500'
    }, 100);
  });

  $(".LeftArrow ").click(function() {
    $(".columns").animate({
      scrollLeft: '-=500'
    }, 100);
  });



}); //end script

body {
  font-family: arial;
}
.columns {
  overflow: hidden;
  width: 500px;
  border: 1px solid #000;
  -webkit-column-fill: auto;
  -webkit-column-width: 300px;
  -webkit-column-gap: 40px;
  -moz-column-fill: auto;
  -moz-column-width: 300px;
  -moz-column-gap: 40px;
  padding: 0 20px;
  text-align: left;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.notsectable …

我正在处理列表中的一些项目：

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
</ul>

我正在尝试使用flexbox将它们分为两列，从而得出以下结果：

+--------------------+
|                    |
| Item1       Item2  |
|                    |
| Item3       Item4  |
|                    |
| Item5       Item6  |
|                    |
| Item7       Item8  |
|                    |
+--------------------+

但是我试图按升序对它们进行排序，因此看起来像这样：

+--------------------+
|                    |
| Item1       Item5  |
|                    |
| Item2       Item6  |
|                    |
| Item3       Item7  |
|                    |
| Item4       Item8  |
|                    |
+--------------------+

除非我需要在混合中添加一些JS，否则不知道如何使用CSS + Flexbox实现该目标吗？

这是Codepen上的演示：

https://codepen.io/ultraloveninja/pen/drKLzG

我正在使用CSS Columns,例如:

HTML:

<div class="foo">
    <div class="content">

    </div>
</div>

CSS:

.content {
    column-count: 2;
}

但是我想在使用时让我的列具有不同的宽度column-width.

这有可能吗？我想也没办法使用百分比？

我遇到了可能只是Chrome 中的一个错误，但我希望得到另一组关注，并希望告诉我我是否在这里遗漏了什么。

问题：

我有一些<li>标签分布在三个 CSS 列 ( column-count: 3) 上，每个项目都有一个transform属性。然后当我在这些<li>标签中转换子项时，不在第一列中的每个子项都消失了。

这是 CodePen 上的一个内置示例：https ://codepen.io/andyranged/pen/WMdrxR

同样，这仅发生在 Chrome 中。在此先感谢您提供的任何帮助！

这是我的HTML页面:

https://jsfiddle.net/62czmtvt/2/(实际看到HTML页面正常工作)

来自JSFiddle的代码:

:root {
  background-color: #FFFACD;
}

div.infoguide {
  width: 240px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  background-color: #F0FFF0;
}

div {
  margin: 5;
  padding: 0;
  border: 0;
  outline: 0;
}

A:link {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:visited {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:active {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

A:hover {
  text-decoration: underline;
  color: rgb(204, 51, 51);
}

body {
  margin-left: 0px;
  margin-top: 0px;
}

body,
td,
th {
  font-family: …