标签: css-multicolumn-layout

我有一个ul使用JavaScript动态生成的HTML .生成之后,我ul使用JQuery的$('#id').css('property',value)方法设置样式.这就是有问题的代码:

$('#actionSpace #datasetContent')
   .css('-moz-column-count',this.content.length)
   .css('-webkit-column-count',this.content.length)
   .css('column-count',this.content.length)
   .css('width',this.content.length*150 + 'px');

基本上,我设置了3个不同的column-count属性 - 一次用于常规css,一次用于-moz域中的css,一次用于-webkit域中的css,然后我还设置了width属性.

这段代码在Firefox中运行得很好 - ul具有datasetContent更新ID 的元素的css 就好了.

但是,当我在webkit(Safari或Chrome)中运行它时,这将停止工作.奇怪的是,width属性(我在上面那条长行的css中设置的最后一件事)设置正确,但其他属性都没有设置.如果我在Chrome的检查器中手动更改它们,则网站更新就可以了.但是,当然,我不能合理地期望我的网站用户在我的页面上手动修补CSS以使其看起来很好:)

有没有人知道可能导致这个问题的原因是什么？

更新我尝试切换ul到a div,这根本没有任何区别.问题特别是JQuery CSS和列计数属性.也许这是直接提交给JQuery的人们的东西？我将等待,看看这里是否有任何回复,如果没有,我会在那里找到合适的通道.

我正在尝试在我的页面上创建类似报纸的列.但是,我的页面包含表格,在IE,Chrome,Safari和Opera中,表格被分成两个不同的列;这不是我想要的行为.如果有桌子,我希望完全在一列内.这是一些代码:

.newspaper {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
}

<div class="newspaper">
  <table>
    <tr><td>Table Row 1</td></tr>
    <tr><td>Table Row 2</td></tr>
    <tr><td>Table Row 3</td></tr>
    <tr><td>Table Row 4</td></tr>
  </table>
  <p>Paragraph</p>
</div>

一个简单的方法来查看问题并摆弄它是使用Chrome并访问http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并粘贴他们示例中的代码.如果您尝试Firefox,您将看到该表完全位于左列中.

更新:适用于所有浏览器的最新代码位于此JSFiddle中 - https://jsfiddle.net/webvitaly/yu00ugft/5/

我正在尝试使用纯CSS方法制作响应列.

我有一个问题,列有时在顶部有差距/边距.

JSFiddle链接尝试和探索 - https://jsfiddle.net/webvitaly/yu00ugft/

怎么解决？

CSS:

.fx-columns {
  background: yellow;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.fx-columns-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.fx-columns-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

.fx-columns .fx-column {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  background: pink;
  clear: both;
  margin-bottom: 20px;
}

HTML:

<div class="fx-columns fx-columns-4">
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div> …

我尝试在列中显示多个按钮

.columnized {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

和标记

<div class="columnized col-md-6">
    <p>
        <button type="button" class="btn btn-default btn-xs">text</button>
    </p>
    <!-- ... more buttons ... -->
</div>

但整个div显示为一条线,所有的ps看起来都像是浮在右边.

这是奇怪的是,这部作品在Firefox 28和连 Internet Explorer 10,而不是在Chrome 33.

我试图强制 li.key 不换行到新列。我想要一个新的 li.key 从每列的顶部开始。这是一个 JS 小提琴。

不使用JS可以实现吗？

<ol class="columns">
    <li class="key">A
        <ol>
            <li>Alcoholic beverage, wine, table, white, Fume Blanc</li>
            <li>Alcoholic Beverage, wine, table, red, Cabernet Franc</li>
            <li>Apples, raw, red delicious, with skin</li>
        </ol>
    </li>
    <li class="key">B
        <ol>
            <li>Buckwheat groats, roasted, dry</li>
            <li>Babyfood, vegetables, carrots, junior</li>
            <li>Beef, round, knuckle, tip center, steak, separable lean and fat, trimmed to 0" fat, all grades, raw</li>
            <li>Bagels, plain, unenriched, with calcium propionate (includes onion, poppy, sesame)</li>
            <li>Babyfood, juice, mixed fruit</li>
            <li>Beef, short …

我有水平滚动列.其中有一些带有标题的文本.我需要让每个标题都放弃一个新列并占用列上面的所有空格:

或者:

但我能做的最好的事情是(顺便说一下,它在Firefox中失败了):

我尝试使用inline-blocks 存档所需的结果,但另一个问题出现在那里.我还尝试了一些带有负边距,绝对定位的方法transform,但没有成功:它们不允许超越列(除了absolute使用上下文:它忘记了基于列的水平定位).

最简单的代码https://jsfiddle.net/07n6L2yh/10/

.container {
  outline: 1px dotted gray;
  height: 200px;
  -moz-column-width: 10em;
  column-width: 10em;
  -moz-column-fill: auto;
  column-fill: auto;
  overflow-x: auto;
}

h2 {
  break-before: column; /* Firefox? */
  border-bottom: 1px solid;
  margin: 0 0 .25em;
}

p {
  margin: 0;
}

<div class="container">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum …

我正在尝试使用多列创建一组 <a> 。但它将一个 <a> (Link4) 分成两列。:( 只需将鼠标悬停在 Link4 上即可。它的某些部分被拆分到第二列。:( 有没有可能的方法来避免这种情况。

div.Nav {
  height: 100% !important;
}

div.Nav a.icon {
  position: absolute;
  right: 0;
  top: 0;
}

div.Nav a {
  transition: 0.5s;
  line-height: 25px;
  text-align: center;
  font-weight: lighter;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 20px;
  float: none !important;
  display: block;
  text-align: left;
}

div.Nav a.active {
  background-color: #4CAF50;
  color: white;
  cursor: default;
}

div.Nav a:hover:not(.active) {
  background-color: rgb(56, 62, 50);
  color: #fffd78;
  transition: 0.5s;
}

div.Nav div.newspaper {
  -webkit-column-count: …

我在页面上有很大一部分文本，当屏幕变大时，我有媒体查询来使文本形成列。但是，当我这样做时，有些照片并没有完全进入一列。

无论出于何种原因，它都会拆分照片并将其中的一部分显示在一列底部，其余部分显示在下一列中。这也发生在 div 上。如果我交换了白色特征 div 和图像，那么它也会自行分裂。

这是我的代码的一部分，带有一个快速示例：

.content-heading h1{
	border-top: 10px solid;
	margin-top: 100px;
	padding-top: 15px;
	line-height: 1;
	display:  inline-block;
}
.content-heading h2{
	padding-bottom: 15px;
	margin-bottom: 50px;
}
.img-box{
	background-position: center top;
	background-size:cover;
	border-radius: 8px;
	height: 250px;
	width: 250px;
	border: 8px solid #fff;
}
.container-fluid.no-pad{
  padding:0;
}
#youth-development{
    color:  #fff;
    position:  relative;
    background: rgba(244, 121, 32, 1);
}
#youth-development h1{
    border-top: 10px solid #fff;
    padding-top: 15px;
    margin-top: 0;
    display:  inline-block;
    padding-right: 99px;
}	
#youth-development h2{
	padding-bottom: 15px;
}
#youth-development .column-content{ …

使用，我在5列中显示了一组div display: inline-block。

我希望它们像这样堆叠：

1 5
2 6
3 7
4 8

代替：

1 2
3 4
5 6
7 8

到目前为止，我有：

1 5
2 6
3 7
4 8

1 2
3 4
5 6
7 8

如何使它们从上到下而不是从左到右堆叠？

如何使用CSS从一个列表中创建多列？ 列数必须根据媒体查询的屏幕宽度而变化，如下所示：

Row1 Row6  Row11
Row2 Row7  Row12
Row3 Row8  Row13
Row4 Row9  Row14
Row5 Row10

Row1 Row8
Row2 Row9
Row3 Row10
Row4 Row11
Row5 Row12
Row6 Row13
Row7 Row14

Row1
Row2
Row3
Row4
Row5
Row6
Row7
Row8
Row9
Row10
Row11
Row12
Row13
Row14

<ul>
  <li>Row1</li>
  <li>Row2</li>
  <li>Row3</li>
  <li>Row4</li>
  <li>Row5</li>
  <li>Row6</li>
  <li>Row7</li>
  <li>Row8</li>
  <li>Row9</li>
  <li>Row10</li>
  <li>Row11</li>
  <li>Row12</li>
  <li>Row13</li>
  <li>Row14</li>
</ul>