Question

我有一个包含动态内容的固定大小的容器。内容是一系列不同高度的项目。我希望项目垂直流动（每个项目在前一个视觉下方），但能够在特定项目上注入列分隔符。我使用JavaScript来注入列分隔符，因此知道需要多少总列数，因此可以在某处注入总列数（如果有用）。

以下是我以前在Chrome中使用过的工具。希望在一列中具有A1-A5，在第二列中具有B1-B2。整个section应垂直滚动，而不是水平滚动。

＆＃13;

section { width:400px; height:300px; font:9pt sans-serif; overflow:auto }
div { margin-bottom:1em; -webkit-column-break-inside:avoid }
h3 { margin:0; background:#000; color:#fff; padding:4px; font-size:9pt }
span { display:block; height:45px; background:#ddd; padding:4px }

/* The following are injected by JavaScript */
section { -webkit-column-count:2 }
#B1 { -webkit-column-break-before:always }

＆＃13;

<section>
  <div id="A1"><h3>A1</h3><span>content</span></div>
  <div id="A2"><h3>A2</h3><span>content</span></div>
  <div id="A3"><h3>A3</h3><span>content</span></div>
  <div id="A4"><h3>A4</h3><span>content</span></div>
  <div id="A5"><h3>A5</h3><span>content</span></div>
  <div id="B1"><h3>B1</h3><span>content</span></div>
  <div id="B2"><h3>B2</h3><span>content</span></div>
</section>

＆＃13;

如在Chrome中所见，上面的代码片段将A4包裹在第二列上并创建三列水平滚动。 如何实现我对两列垂直滚动的需求？

_{我很容易更改全局CSS，并使用JavaScript将新的自定义CSS应用于每个<div>，但是（由于复杂的原因）我很难使用JavaScript修改DOM 。我更喜欢不修改DOM的解决方案。}

Answer 1

我相信你要解决的问题是在第一个css块中定义“section”元素的高度。这样做：

section { width:400px; height:auto; font:9pt sans-serif; overflow:auto }

随着这种变化，一切都应该没问题。 jsfiddle here

但是你会失去固定的大小。我找不到不符合此要求的配置。

使用固定列

1 个答案: