Css 如何在等高柱上制作圆角

我需要制作三个具有不同内容量的等高列，并带有圆角。拐角需要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>

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

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

---

我的底边都乱了。有什么建议吗？

您可以从在一个包装的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>

我不相信IE在这个时候支持这个，但是谁在乎呢

---

除非我遗漏了什么，否则这应该对你有好处。

你对使用JavaScript来实现这一点感兴趣吗？您可以运行一小段JavaScript来迭代这三列，获得它们的每个高度，然后将它们全部设置为最高高度。我之前已经针对您的具体情况这样做过（希望在不设置固定高度的情况下使用CSS3圆角来平衡列）。

首先，我将更改您的CSS，如下所示：

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

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

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使列看起来具有相同的宽度：

---

您可以使用javascript强制这三列的高度相等。以下是jQuery插件的一个示例：

这是一个快速的魔术原型：

要点是：将包装纸用作假盒，并将立柱放置在包装纸上

有很多东西需要改进，但你必须有想法。

这个演示也可以

特里·里格尔

给你