Как сделать закругленные углы на равных по высоте столбцах - PullRequest
Новая
       16

Как сделать закругленные углы на равных по высоте столбцах

3 голосов
/ 12 августа 2011

Мне нужно сделать три одинаковых по высоте столбца с различным количеством контента с закругленными углами.углы должны иметь радиус границы 8 пикселей.Я бы предпочел сделать это с помощью чистого 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%;
}

Все мои нижние границы запутаны.Есть предложения?

Ответы [ 5 ]

3 голосов
/ 12 августа 2011

Вот быстрый магический прототип для вас: http://jsfiddle.net/6nVdT/

Суть в том, чтобы использовать обертки как искусственные ящики и размещать над ними столбцы.

Есть много вещей, которые можно улучшить, но вы должны понять.

1 голос
/ 11 октября 2011

Это демо работает также

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

http://jsfiddle.net/BMCT3/

Терри Ригель

0 голосов
/ 12 августа 2011

Вам было бы интересно использовать JavaScript для этого? Вы можете запустить небольшой кусочек JavaScript, чтобы перебрать три столбца, получить каждый из их высот, а затем установить все из них на максимальную высоту. Я делал это раньше для вашей конкретной ситуации (желая выровнять столбцы с закругленными углами CSS3 без установки фиксированной высоты).

0 голосов
/ 12 августа 2011

Прежде всего, я бы изменил ваш 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/

0 голосов
/ 12 августа 2011

Ну, вы можете начать с создания 3 столбцов в обернутом DIV. 

#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 поддерживает это в настоящее время, но кого это волнует ...

, если я ничего не пропустил, это должно сделать вас правильно.

...