如何在等高列上制作圆角 [英] How to make rounded corners on equal height columns

问题描述

我需要制作三个等高的列，并带有不同数量的带有圆角的内容.角需要8px的边框半径.如果可能的话，我宁愿使用纯CSS完成此操作.

I need to make three equal height columns with varying amounts of content with rounded corners. the corners need an 8px border radius. I would prefer to accomplish this with pure CSS if possible.

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

Right now my html looks like this:

<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看起来像这样:

and my CSS looks like this:

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

我的下边框都弄乱了.有什么建议吗?

My bottom borders are all messed up. Any suggestions?

推荐答案

以下是为您提供的快速魔术原型: http://jsfiddle.net/6nVdT/

Here is a quick magic prototype for you: http://jsfiddle.net/6nVdT/

重点是:将包装纸用作人造盒子，并在其上放置列.

The point is: to use wrappers as a faux boxes, and positioning the columns over them.

有很多地方需要改进，但是您必须明白这一点.

There are a lot of things to improve, but you must get the idea.

这篇关于如何在等高列上制作圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！