Question

我需要制作三个相等高度的列，其中包含圆角的不同内容量。角落需要8px的边界半径。如果可能的话，我宁愿用纯CSS实现这一点。

现在我的html看起来像这样：

<div class="col-w">
      <div class="col-h col-1">
        <h2>About Us</h2>
        <p>Founded in 1995 in Atlanta, Georgia, The Creative Circus is an accredited, two-year, portfolio-building, educational program for the creative side of the Advertising, Interactive Development, Design and Photography industries. Located in an energetic, converted warehouse that feels more like an agency, design firm or studio than a traditional school, future creatives build portfolios that help them land the best jobs in the field.</p>
        <p><a href="http://www.creativecircus.edu">Find out more about us.</a></p>
      </div>
      <div class="col-h col-2">
        <h2>Admissions</h2>

        <p>The Creative Circus is committed to seeking out and enrolling applicants of high standard. Our school follows a selective admissions process which includes a required admissions interview and portfolio submission. Admission is based on your commitment and dedication to your field of interest as determined by an admissions interview. This selection process allows us to provide a unique creative learning environment filled with the “best-prepared, most avidly sought-after creatives in the industry.”</p>
      </div>
      <div class="col-h col-3">
        <h2>Programs of Study</h2>
        <p>Since 1995, we’ve seen a lot of changes.  But through all the trends, we still have one mantra – concept is king. Whether you come for Art Direction, Copywriting, Design, Image or Interactive Development, original ideas are what get you hired.</p>
        <p>For more information about what we teach and why, please <a href="http://www.creativecircus.edu">download our Course Catalog</a></p>
      </div>
</div>

我的CSS看起来像这样：

div.col-w {
    overflow: hidden;
}

div.col-w.col-b {
    font-size: 0;
    height: 8px;
}

div.col-w div.col-h {
    background-color: #FFF;
    border: 8px solid #B2A68E;
    -moz-border-radius: 8px;
border-radius: 8px;
    float: left;
    margin-bottom: -9000px;
    margin-right: 5px;
    padding: 10px 10px 9010px;
    width: 29%;
}

我的底部边界都搞砸了。有什么建议吗？

Answer 1

这是一个快速的魔术原型：http://jsfiddle.net/6nVdT/

重点是：将包装器用作虚拟盒子，并将列放在它们上面。

有很多事情需要改进，但你必须明白这一点。

Answer 2

此演示也适用

http://jsfiddle.net/BMCT3/1/

http://jsfiddle.net/BMCT3/

Terry Riegel

Answer 3

那么你可以从包装的DIV中创建3列开始。

#3colWrap{ width: 900px; }
.col{ width:300px; height:500px; float:left; }

<div id="3colWrap">
     <div class="col">Column 1</div>
     <div class="col">Column 2</div>
     <div class="col">Column 3</div>
</div>

那应该并排给你3列，包装中的高度相等。（包装器可能没有必要，但可以防止浮动在顶部或列下方。

现在你想要圆角吗？

我可以为您提供多种方法，但这里有一个简单的工具：

http://border-radius.com/

你的CSS应该是这样的：

.col{ 
     width:300px; 
     height:500px; 
     float:left; 
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      border-radius: 5px;
}

我不相信IE目前支持这个，但是谁在乎......

除非我错过任何事情，否则你应该做对。

Answer 4

您是否有兴趣使用JavaScript？您可以运行一小段JavaScript来迭代三列，获得每个高度，然后将它们全部设置为最高高度。我之前已根据您的具体情况做了这个（想要在没有设置固定高度的情况下使用CSS3圆角平均列。）

Answer 5

首先，我会改变你的CSS：

div.col-w div.col-h {
    background-color: #FFF;
    border: 8px solid #B2A68E;
    -moz-border-radius: 8px;
    border-radius: 8px;
    float: left;
    margin-right: 5px;
    padding: 10px 10px 10px;
    width: 26%;
}

单独使用CSS，无法强制三列的高度相同。您可以使用min-height或height强制它们具有相同的高度。但是，特别是在你的情况下，问题是你有一个液体布局，所以你选择的高度可能太短或太高，这取决于窗户的大小。

修改：有一种方法可以使用CSS使列看起来宽度相同：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

您可以使用javascript强制三列采取相同的高度。以下是jQuery插件的示例：http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

如何在相等高度的列上制作圆角

5 个答案: