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

gesandte · October 26, 2009

Имеем код


.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 October 26, 2009 by gesandte

gesandte · October 27, 2009

Нее, нихрена, медведь прав, у меня полное говно, надо думать дальше
блин, а жаль, хороший вариант был Значит пока Чекуёнок на коне

да? я просто на код глянул, а так не проверял

mishka · October 27, 2009

Значит пока Чекуёнок на коне

В каком смысле? Ведь в его примере нет скругленного бордера.

Или я чтото пропустил?

Edited October 27, 2009 by mishka2

psywalker · October 27, 2009

В каком смысле? Ведь в его примере нет скругленного бордера.
Или я чтото пропустил?

Да всё равно идея у него работает, а у меня вообще её нет, так что он на коне, ну ничего, как говорится, мы тоже не лыком шиты, буду думать

s0rr0w · October 27, 2009

http://www.positioniseverything.net/articl..._future_perfect

gesandte · October 27, 2009

http://www.positioniseverything.net/articl..._future_perfect

спасибо

вечером буду разбирать

Edited October 27, 2009 by gesandte

psywalker · October 27, 2009

Спешл фо Чекуёнок: Второй заход

http://psywalker.ru/Forum/Column_height/main2.html

mishka · October 27, 2009

Спешл фо Чекуёнок: Второй заход
http://psywalker.ru/Forum/Column_height/main2.html

div.left, div.center, div.right {

float:left;

margin-left:2%;

min-height:40px;

padding:20px 0;

width:30%;

}

Добавь - position:relative, чтобы текст выделялся.

и никак нельзя всунуть

left в left_content

center в center_content

и

right в right_content

А вообще - здорово ты как всегда на высоте.

Я бы всеже высоту равнял джсом

Edited October 27, 2009 by mishka2

psywalker · October 27, 2009

mishka2

Да, получилось здорово, но щас объясню момент:

1)

div.left, div.center, div.right {
float:left;
margin-left:2%;
min-height:40px;
padding:20px 0;
width:30%;
}
Добавь - position:relative, чтобы текст выделялся.

Объясни зачем, не понял?

2)

и никак нельзя всунуть
left в left_content
center в center_content
и
right в right_content

К сожалению нельзя из-за ИЕ6, там тогда Абсолюты творят говно вообще, проверь сам

mishka · October 27, 2009

1) попробуй в фф выделить текст для того чтобы скопировать.

2) плохо, так как код некрасивый получается.

psywalker · October 27, 2009

1) попробуй в фф выделить текст для того чтобы скопировать.
2) плохо, так как код некрасивый получается.

1) Ага,согласен

2) Ну тут уже не попишешь ничё, ИЕ6 говно и сказать нечего, думаю это всё из-за экспрешана. Вобщем если-бы не он...ну да ладно, вобщем результат имеем

Я конеш постараюсь ещё что нибудь придумать, просто так наши не сдаются

mishka · October 27, 2009

предлагаю решение выравнивания высоты на джс.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>sameHeight</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	.box,
	.block{
		float:left;
		width:300px;
		padding:0 10px;
	}
	.element{
		float:left;
	}
	-->
	</style>
	<script type="text/javascript">
	<!--
	function initScript(){
		sameHeight({
			tagName:'div',
			tagClass:'box'
		});
		sameHeight({
			tagName:'div',
			tagClass:'block'
		});
		sameHeight({
			tagName:'span',
			tagClass:'element'
		});
	}

	function sameHeight(_options){
		var _tagName=_options.tagName;
		var _tagClass=_options.tagClass;
		var maxHeight=0;
		var _elements=document.getElementsByTagName(_tagName)

		if(_elements){
			for(var i=0;i<_elements.length;i++){
				if(_elements[i].className.indexOf(_tagClass)!=-1){
					_elements[i].style.height='auto';
					if(_elements[i].offsetHeight>=maxHeight){
						maxHeight=_elements[i].offsetHeight;
					}
				}
			}
			for(var i=0;i<_elements.length;i++){
				if(_elements[i].className.indexOf(_tagClass)!=-1){
					_elements[i].style.height=maxHeight+'px';
				}
			}
		}
	}
	if(window.addEventListener){
		window.addEventListener("load",initScript,false);
	}else if(window.attachEvent){
		window.attachEvent("onload",initScript);
	}
	//-->
	</script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div class="boxes" style="background:#ff0;height:1%;overflow:hidden;padding:0 10px">
		<p>t</p>
	</div>
	<div class="box" style="background:#c33">
		<p>Lorem ipsum dolor sit amet consectetuer sem tempus tortor hac nunc. Orci Sed dolor parturient In eget parturient sit Nullam ante elit. Non nec Nam tincidunt augue.</p>
	</div>
	<div class="box" style="background:#33c">
		<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
		<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
	</div>
	<div class="box" style="background:#3c3">
		<p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p>
		<p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p>
	</div>
	<div class="block" style="background:#33AF6B">
		<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
		<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
		<p>Maecenas est ipsum rutrum Sed elit dictumst tristique volutpat In nisl. Natoque felis Cum et parturient amet iaculis In quis lacus quis. </p>
		<p>Curabitur Curabitur orci wisi ut lorem urna feugiat pretium vitae consectetuer. Hendrerit Nullam eget odio in risus in.</p>
	</div>
	<div class="block" style="background:#E3A133">
		<p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p>
		<p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p>
		<p>Eu id lacus eu Vestibulum egestas vitae enim id mauris ut. Sagittis lorem Curabitur tincidunt semper justo nunc auctor orci gravida adipiscing. Pulvinar sem nunc et semper dapibus.</p>
	</div>
	<span class="element" style="background:#E31ED7">
		span
	</span>
	<span class="element" style="background:#0C8EFF">
		span<br /><br />
	</span>
</div>
<!-- end wrapper -->
</body>
</html>

Только нужна помощь JS-джедая . Надо делать проверку наличия класса не через indexOf, так как сталкиваемся с проблемой - при такой проверке "box" и "boxes" - одинаковые елементы. Это видно в моем примере. Вопрос знатокам джс - как осуществить такую проверку?

Возможно это можна както красиво сделать через регулярное выражение?

Edited October 27, 2009 by mishka2

Great Rash · October 27, 2009

var re = /box\b/;
if (re.test(_elements[i].className)) {
	alert('это нужный класс');
}

как-то так, чуть напортачил, но поправил

Edited October 27, 2009 by Great Rash

mishka · October 27, 2009

Ксожалению немогу понять куда это надо поставить чтобы работало...

Я так уже пытался делать

Мне надо чтото типа

/_tagClass\b/; - но я так подозреваю что это выражение не примет "_tagClass" как переменную, а будет искать именно class="_tagClass"

Edited October 27, 2009 by mishka2

Great Rash · October 27, 2009

var _tagClass = 'box';
var re = eval('/' + _tagClass + '\\' + 'b/');
alert(re.test('box boxes'));
alert(re.test('boxes box'));
alert(re.test('box'));
alert(re.test('boxes'));

Edited October 27, 2009 by Great Rash

mishka · October 27, 2009

несработало

результат тот же

Edited October 27, 2009 by mishka2

Great Rash · October 27, 2009

Вставь мой код в отдельный скрипт и посмотри. Он работает правильно, т.е. алертит true, true, true, false. Т.е. находит строку box в трех случаях. Значит проблема в твоем скрипте.

mishka · October 27, 2009

Great Rash, спасибо ты настоящий джедай . Действительно ошибка была у меня, так как у меня два раза идет проверка, а я менял только первую. Все супер. Спасибо тебе

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>sameHeight</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	.box,
	.block{
		float:left;
		width:300px;
		padding:0 10px;
	}
	.element{
		float:left;
		padding:0 10px;
	}
	-->
	</style>
	<script type="text/javascript">
	<!--
	function initScript(){
		sameHeight({
			tagName:'div',
			tagClass:'box'
		});
		sameHeight({
			tagName:'div',
			tagClass:'block'
		});
		sameHeight({
			tagName:'span',
			tagClass:'element'
		});
	}

	function sameHeight(_options){
		var _tagName=_options.tagName;
		var _tagClass=_options.tagClass;
		var maxHeight=0;
		var _elements=document.getElementsByTagName(_tagName)
		var re=eval('/'+_tagClass+'\\'+'b/');

		if(_elements){
			for(var i=0;i<_elements.length;i++){
				if(re.test(_elements[i].className)){
					_elements[i].style.height='auto';
					if(_elements[i].offsetHeight>=maxHeight){
						maxHeight=_elements[i].offsetHeight;
					}
				}
			}
			for(var i=0;i<_elements.length;i++){
				if(re.test(_elements[i].className)){
					_elements[i].style.height=maxHeight+'px';
				}
			}
		}
	}

	if(window.addEventListener){
		window.addEventListener("load",initScript,false);
	}else if(window.attachEvent){
		window.attachEvent("onload",initScript);
	}
	//-->
	</script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div class="boxes" style="background:#ff0;height:1%;overflow:hidden;padding:0 10px">
		<p>t</p>
	</div>
	<div class="box" style="background:#c33">
		<p>Lorem ipsum dolor sit amet consectetuer sem tempus tortor hac nunc. Orci Sed dolor parturient In eget parturient sit Nullam ante elit. Non nec Nam tincidunt augue.</p>
	</div>
	<div class="box" style="background:#33c">
		<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
		<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
	</div>
	<div class="box" style="background:#3c3">
		<p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p>
		<p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p>
	</div>
	<div class="block" style="background:#33AF6B">
		<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
		<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
		<p>Maecenas est ipsum rutrum Sed elit dictumst tristique volutpat In nisl. Natoque felis Cum et parturient amet iaculis In quis lacus quis. </p>
		<p>Curabitur Curabitur orci wisi ut lorem urna feugiat pretium vitae consectetuer. Hendrerit Nullam eget odio in risus in.</p>
	</div>
	<div class="block" style="background:#E3A133">
		<p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p>
		<p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p>
		<p>Eu id lacus eu Vestibulum egestas vitae enim id mauris ut. Sagittis lorem Curabitur tincidunt semper justo nunc auctor orci gravida adipiscing. Pulvinar sem nunc et semper dapibus.</p>
	</div>
	<span class="element" style="background:#E31ED7">
		span
	</span>
	<span class="element" style="background:#0C8EFF">
		span<br /><br />span
	</span>
</div>
<!-- end wrapper -->
</body>
</html>

psywalker · October 27, 2009

Мих, я не понял, чё за хрень? Я скопировал код, открыл, и там никаких колонок с высотой явно нет

gesandte · October 27, 2009

на jquery есть такая фишка

фишка

Edited October 27, 2009 by gesandte

psywalker · October 28, 2009

на jquery есть такая фишка
фишка

Видел там минусы:

1) Везде колонки фикс ширины

2) Без закруглённых углов

3) Ислользуется JQ

В моём доделанном варианте этих проблем нет

http://psywalker.ru/Forum/Column_height/main2.html

Great Rash · October 28, 2009

psywalker, ты хоть иногда спишь вообще?

psywalker · October 28, 2009

psywalker, ты хоть иногда спишь вообще?

Друг я объясню Дело в том, что я такой человек по-жизни, что если мне что-то понравится, то я серьёзно и ответственно к этому отношусь, а тут как раз такое дело. Обожаю CSS и этот форум, поэтому и сплю не часто

p.s. - Вот бы JS так же понравился-бы

rash · October 28, 2009

В каком смысле? Ведь в его примере нет скругленного бордера.
Или я чтото пропустил?

В его примере можно ставить фоновые изображения по низу колонок, а значит возможность скруглить уголки внизу есть.

psywalker · October 28, 2009

Great Rash, rash как специалисты ответьте мне, мой вариант имеет право на жизнь вообще или не о чём и какие в нём косяки?

http://psywalker.ru/Forum/Column_height/main2.html

Great Rash · October 28, 2009

this.parentNode.offsetHeight-10-10+'px'
а почему не написать
this.parentNode.offsetHeight-20+'px' ???

А вообще, по большому счету у тебя тоже скрипты юзаются, правда только для ИЕ. Я бы посоветовал тогда уж в кандишнл камментс запихнуть скрипт, а не экспрешн. Самолично вешал ИЕ6,7 экспрешнами, поэтому я их боюсь.

А в остальном... что тут скажешь... твой вариант уже взят на вооружение

Sign In

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

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

53 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information