Jump to content
  • 0

Колонки одинаковой высоты


gesandte
 Share

Question

Имеем код


.column_block {
width: 100%;
overflow: hidden;
}

.column {
border: 3px solid rgb(150,230,150);
width: 30%;
margin: 0 1% 0 1%;
float: left;
}

.column .radius_top, .column .radius_top div,
.column .radius_bottom, .column .radius_bottom div {
background: url(../images/radius_column.png) no-repeat;
height: 20px;
display: block;
position: relative;
}

.column .radius_top {
top: -3px;
left: -3px;
}

.column .radius_top div {
background-position: 100% -20px;
left: 6px;
}

.column .radius_bottom {
background-position: 0% -60px;
top: 3px;
left: -3px;
}

.column .radius_bottom div {
background-position: 100% -40px;
left: 6px;
}


<div class="column_block">
<div class="column">
<div class="radius_top"><div></div></div>
<p>column 1</p>
<div class="radius_bottom"><div></div></div>
</div>

<div class="column">
<div class="radius_top"><div></div></div>
<p>column 2<br /> column 2</p>
<div class="radius_bottom"><div></div></div>
</div>

<div class="column">
<div class="radius_top"><div></div></div>
<p>column 3</p>
<div class="radius_bottom"><div></div></div>
</div>
</div>

При попытке зделать колонки одинаковой высоты:

.column {

border: 3px solid rgb(150,230,150);

width: 30%;

margin: 0 1% 0 1%;

padding-bottom: 10000px;

margin-bottom: -10000px;

float: left;

}

radius_bottom не примыкает к низу, а начинается сразу после окончания текста, боковые же линии бордера естественно заканчиваются на уровне самой высокой колонки. Пробывал, пробывал их прижать, не вышло....

Спасибо за внимание.

Edited by gesandte
Link to comment
Share on other sites

  • Answers 53
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Recommended Posts

  • 0

Great Rash

Секундочку, тогда ответ и вопросы:

1) Какой скрипт ты имеешь ввиду, который хочешь запихнуть в кандишнл комментс?

2) Разве экспрешан не лучше скрипта, ведь он же маленький(одна строка) и всего для одного браузера

3)

this.parentNode.offsetHeight-10-10+'px'

а почему не написать

this.parentNode.offsetHeight-20+'px' ???

Потому что у меня просто есть шаблон этих вариантов, а сам я в них ничё не понимаю)))

Link to comment
Share on other sites

  • 0

Ну синтаксис экспрешнов и яваскрипта один и тот же. Да и делают они одно и то же. Только яваскрипт по идее работает быстрее. И вообще народ рекомендует по возможности избавляться от экспрешнов. Вот я и подумал вынести все экспрешны в один скрипт и использовать его. Проблема будет только одна: при использовании яваскрипта надо сначало найти элемент в дереве ДОМ, а потом уже делась с ним, что хош, а при использовании экспрешна элемент искать не надо.

Link to comment
Share on other sites

  • 0
Ну синтаксис экспрешнов и яваскрипта один и тот же. Да и делают они одно и то же. Только яваскрипт по идее работает быстрее. И вообще народ рекомендует по возможности избавляться от экспрешнов. Вот я и подумал вынести все экспрешны в один скрипт и использовать его. Проблема будет только одна: при использовании яваскрипта надо сначало найти элемент в дереве ДОМ, а потом уже делась с ним, что хош, а при использовании экспрешна элемент искать не надо.
аа, я понял, но для меня легче экспрешаны, так как JS я вообще не знаю, а так тупо подставляю нужный, да и всё :(
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy