如何在等高柱上制作圆角

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/BMCT3/1/

http://jsfiddle.net/BMCT3/

特里·里格尔

Answer 2

首先，我会像这样更改您的 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/

Answer 3

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

重点是：将包装器用作人造盒子，并将列定位在它们之上。

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

Answer 4

你会对此使用 JavaScript 感兴趣吗？您可以运行一小段 JavaScript 来遍历这三列，获取它们的每一个高度，然后将它们全部设置为最高高度。我之前已经针对您的确切情况这样做了（希望在不设置固定高度的情况下使用 CSS3 圆角来平衡列）。

Answer 5

你可以从在一个包装好的 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 支持这个，但谁在乎...

除非我错过了什么，否则你应该是对的。