同じ高さの列に角を丸くする方法

Question

丸みを帯びたコーナーの内容量が異なる3つの等しい高さの列を作る必要があります。コーナーには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

ラップされた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つの列を横に並べ、ラッパーで同じ高さにする必要があります。 （ラッパーが必要になるが、トップに、または列の下のいずれかのフローティングから物事を保持しないことがあります。

今、あなたは丸みを帯びた角をしたい、私はあなたにこれを行う方法の過多を与えるが、可能性があり、右？

簡単なツールは次の場所にあります。あなたのCSSのようなものになるはずです

http://border-radius.com/

：

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

をiがnを行いますIEはこれを現時点でサポートしていると信じていますが、誰が気にしていますか？

私は何かを逃していない限り、

Answer 2

JavaScriptを使用して面白いですか？ JavaScriptの小さな部分を実行して3つの列を反復し、それぞれの高さを取得し、それらのすべてを最高の高さに設定することができます。私はあなたの正確な状況（固定された高さを設定せずにCSS3丸められたコーナーで列を均等にしたい）の前にこれをしました。

Answer 3

まず第一に、私はこのようなあなたの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を使用して、同じ高さに3つの列を強制する方法はありません。 min-heightまたはheightを使用して、それらのすべてが同じ高さになるようにすることができます。しかし、特にこの場合の問題は、液体のレイアウトを使用しているため、ウィンドウのサイズに応じて、選択する高さが短すぎたり高すぎたりすることがあります。あなたが同じ高さを取るために3つの列を強制するためにJavaScriptを使用することができますhttp://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

：

編集：彼らはCSSを使用して同じ幅あるよう列が見えるようにする方法があります。ここではjQueryプラグインの例です：ここでhttp://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

Answer 4

はあなたのための迅速な魔法のプロトタイプです：http://jsfiddle.net/6nVdT/

ポイントは次のとおりです。フェイクボックスとしてラッパーを使用し、それらの上の列を配置します。

改善が必要なことはたくさんありますが、そのアイディアを得る必要があります。

Answer 5

このデモでも動作します

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

http://jsfiddle.net/BMCT3/

テリー・リーゲル