Question

我想制作一个包含三列的网页。其中两列宽度相同，另一列宽一点。我还想在每列周围创建一个渐变边框。

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

<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;
 }

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

Answer 1

您需要将所有内容放在一个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;
}

Answer 2

你必须使用列间隙属性，和/或弄乱你把cols放入的div的整体宽度。

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

在文本的网页上制作三列

2 个答案: