1

我正在尝试多列布局。我想创建一个目录并偶然发现了 CSS column-count-property。此属性指定将在多少列中显示内容（在我的情况下按字母顺序）（在我的情况下为 div）。[我也可以用一张桌子来解决我的问题吗？]

我希望目录有多个列，但同样多，它们不重叠（当然有一定的填充）。我怎样才能获得帽子？如果我硬编码列数（例如 7），我不能确定内容不重叠。如果我没有指定任何内容，column-count 属性将设置为 auto，并将仅在一列中显示所有内容。

而且我不知道我是否可以使用表格，因为数据我们是在逐行而不是逐列指定表格的内容（缩放问题，即仍将保留多少列）。

[编辑]我正在使用 XSLT 来填充目录，即它不是静态内容。[/编辑]

   <div style="-moz-column-count: 50;
-webkit-column-count: 50; column-count: 50;">
    <p><a href="#topic0">topic0</a></p>
<p><a href="#topic1">topic1</a></p>
<p><a href="#topic2">topic2</a></p>
<p><a href="#topic3">topic3</a></p>
<p><a href="#topic4">topic4</a></p>
<p><a href="#topic5">topic5</a></p>
<p><a href="#topic6">topic6</a></p>
<p><a href="#topic7">topic7</a></p>
<p><a href="#topic8">topic8</a></p>
<p><a href="#topic9">topic9</a></p>
<p><a href="#topic10">topic10</a></p>
<p><a href="#topic11">topic11</a></p>
<p><a href="#topic12">topic12</a></p>
<p><a href="#topic13">topic13</a></p>
<p><a href="#topic14">topic14</a></p>
<p><a href="#topic15">topic15</a></p>
<p><a href="#topic16">topic16</a></p>
<p><a href="#topic17">topic17</a></p>
<p><a href="#topic18">topic18</a></p>
<p><a href="#topic19">topic19</a></p>
<p><a href="#topic20">topic20</a></p>
<p><a href="#topic21">topic21</a></p>
<p><a href="#topic22">topic22</a></p>
<p><a href="#topic23">topic23</a></p>
<p><a href="#topic24">topic24</a></p>
<p><a href="#topic25">topic25</a></p>
<p><a href="#topic26">topic26</a></p>
<p><a href="#topic27">topic27</a></p>
<p><a href="#topic28">topic28</a></p>
<p><a href="#topic29">topic29</a></p>
<p><a href="#topic30">topic30</a></p>
<p><a href="#topic31">topic31</a></p>
<p><a href="#topic32">topic32</a></p>
<p><a href="#topic33">topic33</a></p>
<p><a href="#topic34">topic34</a></p>
<p><a href="#topic35">topic35</a></p>
<p><a href="#topic36">topic36</a></p>
<p><a href="#topic37">topic37</a></p>
<p><a href="#topic38">topic38</a></p>
<p><a href="#topic39">topic39</a></p>
<p><a href="#topic40">topic40</a></p>
<p><a href="#topic41">topic41</a></p>
<p><a href="#topic42">topic42</a></p>
<p><a href="#topic43">topic43</a></p>
<p><a href="#topic44">topic44</a></p>
<p><a href="#topic45">topic45</a></p>
<p><a href="#topic46">topic46</a></p>
<p><a href="#topic47">topic47</a></p>
<p><a href="#topic48">topic48</a></p>
<p><a href="#topic49">topic49</a></p>
<p><a href="#topic50">topic50</a></p>
<p><a href="#topic51">topic51</a></p>
<p><a href="#topic52">topic52</a></p>
<p><a href="#topic53">topic53</a></p>
<p><a href="#topic54">topic54</a></p>
<p><a href="#topic55">topic55</a></p>
<p><a href="#topic56">topic56</a></p>
<p><a href="#topic57">topic57</a></p>
<p><a href="#topic58">topic58</a></p>
<p><a href="#topic59">topic59</a></p>
<p><a href="#topic60">topic60</a></p>
<p><a href="#topic61">topic61</a></p>
<p><a href="#topic62">topic62</a></p>
<p><a href="#topic63">topic63</a></p>
<p><a href="#topic64">topic64</a></p>
<p><a href="#topic65">topic65</a></p>
<p><a href="#topic66">topic66</a></p>
<p><a href="#topic67">topic67</a></p>
<p><a href="#topic68">topic68</a></p>
<p><a href="#topic69">topic69</a></p>
<p><a href="#topic70">topic70</a></p>
<p><a href="#topic71">topic71</a></p>
<p><a href="#topic72">topic72</a></p>
<p><a href="#topic73">topic73</a></p>
<p><a href="#topic74">topic74</a></p>
<p><a href="#topic75">topic75</a></p>
<p><a href="#topic76">topic76</a></p>
<p><a href="#topic77">topic77</a></p>
<p><a href="#topic78">topic78</a></p>
<p><a href="#topic79">topic79</a></p>
<p><a href="#topic80">topic80</a></p>
<p><a href="#topic81">topic81</a></p>
<p><a href="#topic82">topic82</a></p>
<p><a href="#topic83">topic83</a></p>
<p><a href="#topic84">topic84</a></p>
<p><a href="#topic85">topic85</a></p>
<p><a href="#topic86">topic86</a></p>
<p><a href="#topic87">topic87</a></p>
<p><a href="#topic88">topic88</a></p>
<p><a href="#topic89">topic89</a></p>
<p><a href="#topic90">topic90</a></p>
<p><a href="#topic91">topic91</a></p>
<p><a href="#topic92">topic92</a></p>
<p><a href="#topic93">topic93</a></p>
<p><a href="#topic94">topic94</a></p>
<p><a href="#topic95">topic95</a></p>
<p><a href="#topic96">topic96</a></p>
<p><a href="#topic97">topic97</a></p>
<p><a href="#topic98">topic98</a></p>
<p><a href="#topic99">topic99</a></p>
<p><a href="#topic100">topic100</a></p>
<p><a href="#topic101">topic101</a></p>
<p><a href="#topic102">topic102</a></p>
<p><a href="#topic103">topic103</a></p>
<p><a href="#topic104">topic104</a></p>
<p><a href="#topic105">topic105</a></p>
<p><a href="#topic106">topic106</a></p>
<p><a href="#topic107">topic107</a></p>
<p><a href="#topic108">topic108</a></p>
<p><a href="#topic109">topic109</a></p>
<p><a href="#topic110">topic110</a></p>
<p><a href="#topic111">topic111</a></p>
<p><a href="#topic112">topic112</a></p>
<p><a href="#topic113">topic113</a></p>
<p><a href="#topic114">topic114</a></p>
<p><a href="#topic115">topic115</a></p>
<p><a href="#topic116">topic116</a></p>
<p><a href="#topic117">topic117</a></p>
<p><a href="#topic118">topic118</a></p>
<p><a href="#topic119">topic119</a></p>
<p><a href="#topic120">topic120</a></p>
<p><a href="#topic121">topic121</a></p>
<p><a href="#topic122">topic122</a></p>
<p><a href="#topic123">topic123</a></p>
<p><a href="#topic124">topic124</a></p>
<p><a href="#topic125">topic125</a></p>
<p><a href="#topic126">topic126</a></p>
<p><a href="#topic127">topic127</a></p>
<p><a href="#topic128">topic128</a></p>
<p><a href="#topic129">topic129</a></p>
<p><a href="#topic130">topic130</a></p>
<p><a href="#topic131">topic131</a></p>
<p><a href="#topic132">topic132</a></p>
<p><a href="#topic133">topic133</a></p>
<p><a href="#topic134">topic134</a></p>
<p><a href="#topic135">topic135</a></p>
<p><a href="#topic136">topic136</a></p>
<p><a href="#topic137">topic137</a></p>
<p><a href="#topic138">topic138</a></p>
<p><a href="#topic139">topic139</a></p>
<p><a href="#topic140">topic140</a></p>
<p><a href="#topic141">topic141</a></p>
<p><a href="#topic142">topic142</a></p>
<p><a href="#topic143">topic143</a></p>
<p><a href="#topic144">topic144</a></p>
<p><a href="#topic145">topic145</a></p>
<p><a href="#topic146">topic146</a></p>
<p><a href="#topic147">topic147</a></p>
<p><a href="#topic148">topic148</a></p>
<p><a href="#topic149">topic149</a></p>
<p><a href="#topic150">topic150</a></p>
<p><a href="#topic151">topic151</a></p>
<p><a href="#topic152">topic152</a></p>
<p><a href="#topic153">topic153</a></p>
<p><a href="#topic154">topic154</a></p>
<p><a href="#topic155">topic155</a></p>
<p><a href="#topic156">topic156</a></p>
<p><a href="#topic157">topic157</a></p>
<p><a href="#topic158">topic158</a></p>
<p><a href="#topic159">topic159</a></p>
<p><a href="#topic160">topic160</a></p>
<p><a href="#topic161">topic161</a></p>
<p><a href="#topic162">topic162</a></p>
<p><a href="#topic163">topic163</a></p>
<p><a href="#topic164">topic164</a></p>
<p><a href="#topic165">topic165</a></p>
<p><a href="#topic166">topic166</a></p>
<p><a href="#topic167">topic167</a></p>
<p><a href="#topic168">topic168</a></p>
<p><a href="#topic169">topic169</a></p>
<p><a href="#topic170">topic170</a></p>
<p><a href="#topic171">topic171</a></p>
<p><a href="#topic172">topic172</a></p>
<p><a href="#topic173">topic173</a></p>
<p><a href="#topic174">topic174</a></p>
<p><a href="#topic175">topic175</a></p>
<p><a href="#topic176">topic176</a></p>
<p><a href="#topic177">topic177</a></p>
<p><a href="#topic178">topic178</a></p>
<p><a href="#topic179">topic179</a></p>
<p><a href="#topic180">topic180</a></p>
<p><a href="#topic181">topic181</a></p>
<p><a href="#topic182">topic182</a></p>
<p><a href="#topic183">topic183</a></p>
<p><a href="#topic184">topic184</a></p>
<p><a href="#topic185">topic185</a></p>
<p><a href="#topic186">topic186</a></p>
<p><a href="#topic187">topic187</a></p>
<p><a href="#topic188">topic188</a></p>
<p><a href="#topic189">topic189</a></p>
<p><a href="#topic190">topic190</a></p>
<p><a href="#topic191">topic191</a></p>
<p><a href="#topic192">topic192</a></p>
<p><a href="#topic193">topic193</a></p>
<p><a href="#topic194">topic194</a></p>
<p><a href="#topic195">topic195</a></p>
<p><a href="#topic196">topic196</a></p>
<p><a href="#topic197">topic197</a></p>
<p><a href="#topic198">topic198</a></p>
<p><a href="#topic199">topic199</a></p>
</div>

在这种情况下，我当然夸大了列的数量，但我想要显示的值仍然重叠，因为我的字符串更长。如果我根本不设置属性，所有内容都显示在一列中。我的问题是：我可以让系统自动扩展吗？那么系统是否可以决定它将使用多少列（最大数量），以使内容不重叠。

4

2 回答 2

0

我会这样做：

p{
    height:20px;
    width:50px;
    display:inline-block;
    margin-left:15px; /* fallback older browsers */
    margin-right:15px; /* fallback older browsers */
    margin-left:calc(100% - ((100% / 240) * 230));
    margin-right:calc(100% - ((100% / 240) * 230));
    margin-top:15px;
    margin-bottom:15px;
    overflow:hidden;
    position:relative;
}
div{
    text-align:center;
}

父 div 将所有内容居中对齐。这calc()是为了创建一个动态边距（我只是从我自己的脚本中获取了这个，所以这可能需要一些更改），以便看起来它们彼此远离/接近。当然，这确实需要固定的高度和宽度<p>。

这是一个例子：http: //jsfiddle.net/DUNkB/

希望这是您正在寻找的。

于 2013-09-04T14:24:09.353 回答
0

改为使用该column-width属性。使用column-count强制特定数量的列，而column-width基本上说使尽可能多的列如此宽以适合可用空间。

http://cssdeck.com/labs/ycqqx5f3

.foo {
  -moz-columns: 8em;
  -webkit-columns: 8em;
  columns: 8em; /* columns is shorthand for column-width column-count */
}
于 2013-09-04T14:24:21.020 回答