0

我想做一个三栏的网页。其中两列宽度相同，另一列稍大。我还想在每一列周围创建一个渐变边框。

到目前为止，我的网页与此类似：

<html>
<head></head>
<body>

<div class="border">
<div><p>The text here is column 1<p></div>
<div><p>The text here is column 2<p></div>
<div><p>The text here is column 3<p></div>
</div>

</body>
</html>

我想以最好的方式做到这一点我尝试添加此代码，但我无法控制不同的宽度：

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

将它们放在三列中并在它们周围带有渐变边框的最佳方法是什么？

编辑：

我尝试在一个 div 中使用此代码，并使用此 css 在段落标签中的 div 中分隔我的文字：

.cols3 {
  -webkit-column-count: 3;
  -webkit-column-gap: 2px;
  -webkit-column-rule: 1px solid #000;

  -moz-column-count: 3;
  -moz-column-gap: 2px;
  -moz-column-rule: 1px solid #000;

  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #000;
 }

但是当我尝试更改列间距时，一列中的文本会进入另一列。

4

2 回答 2

0

您需要将所有内容放在一个 div 中并将column属性应用于：http: //jsfiddle.net/zgJph/

html:

<div class="col3">
    <p>Some text<p>
    <p>Some text<p>
    <p>Some text<p>
</div>

CSS：

.col3{
 column-count: 3;
 column-gap: 20px;
 column-rule: 1px solid #000;
}
于 2013-06-10T19:29:26.320 回答
0

您必须使用 column-gap 属性，和/或弄乱您放入 cols 的 div 的整体宽度。

对于渐变边框，我认为您只需在周围的 div 上做一个普通的边框属性： CSS3 Gradient Borders

于 2013-06-10T20:52:43.437 回答