div съезжает вниз

lolka84 · October 5, 2011

Всем привет!

Уже час ломаю голову, почему центральный див съезжает вниз ?

Заранее благодарю!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>

<style>

.positions {
	width:100%;
	height:197px;
	padding:10px 0;
	display:table;
}
.positions figure {
	width:20%;
	height:197px;
	display:table-cell;
}
.positions figure div {
	width:171px;
	height:185px;
	background:url("img/posFon.png") no-repeat;
	padding:6px;
}
.positions img {
	width:170px;
	height:149px;
}
.positions figcaption {
	text-align:center;
	margin:10px 0 0 0;
}
.fonL {
	float:left;
}
.fonLl {
	float:left;
	margin:0 0 0 3%;
}
.fonR {
	float:right;
}
.fonRr {
	float:right;
	margin:0 3% 0 0;
}
.fonC {
	margin:0 auto; 
}

</style>

</head>

<body>

        <div class="positions">



	    <figure>

            	<div class="fonL">

                    <img src="img/p1.png" alt="" title="">

                    <figcaption>Продаем</figcaption>

            	</div>

            </figure>

	    <figure>

            	<div class="fonLl">

                    <img src="img/p2.png" alt="" title="">

                    <figcaption>Производим</figcaption>

            	</div>

            </figure>

	    <figure>

            	<div class="fonC">

                    <img src="img/p3.png" alt="" title="">

                    <figcaption>Купим</figcaption>

            	</div>

            </figure>

	    <figure>

            	<div class="fonRr">

                    <img src="img/p4.png" alt="" title="">

                    <figcaption>Утилизация</figcaption>

            	</div>

            </figure>

	    <figure>

            	<div class="fonR">

                    <img src="img/p5.png" alt="" title="">

                    <figcaption>Контакты</figcaption>

            	</div>

            </figure>



    	</div>



</body>
</html>

sigma77 · October 5, 2011

lolka84,

флоаты убери.

lolka84 · October 5, 2011

Точно, спасибо!

Но тут тогда другая проблема вылазит - как <div class="fonR"> прижать к правому краю, а <div class="fonL"> к левому ?

Даже так спрошу: как эти 5 дивов расположить в родителе равномерно, что б правый был все время прижат к правому краю, левый - к левому, центральный что б был всегда посередине, а оставшиеся два что б на равноудаленном расстоянии от соседей были ? Дизайн резиновый.

Заранее благодарю!

sigma77 · October 5, 2011

lolka84,

Можешь картинку показать, что должно получиться?

lolka84 · October 5, 2011

Попробывал через позиционирование - ерунда какая-то получается


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>

<style>

.positions {
	width:100%;
	height:197px;
	padding:10px 0;
	display:table;
}
.positions figure {
	width:20%;
	height:197px;
	display:table-cell;
	position:relative;
}
.positions figure div {
	width:171px;
	height:185px;
	background:#333;
	padding:6px;
	position:absolute;
}
.positions img {
	width:170px;
	height:149px;
}
.positions figcaption {
	text-align:center;
	margin:10px 0 0 0;
}
.fonL {
	left:0;
}
.fonLl {
	left:23%;
}
.fonR {
	right:0;
}
.fonRr {
	right:23%;
}
.fonC {
	left:43%;
}

</style>

</head>

<body>

        <div class="positions">



	    <figure>

            	<div class="fonL">


            	</div>

            </figure>

	    <figure>

            	<div class="fonLl">


            	</div>

            </figure>

	    <figure>

            	<div class="fonC">


            	</div>

            </figure>

	    <figure>

            	<div class="fonRr">


            	</div>

            </figure>

	    <figure>

            	<div class="fonR">


            	</div>

            </figure>



    	</div>



</body>
</html>

Вырезка с макета, как должно быть:

http://www.e1.ru/fun/photo/view_pic.php/o/5fc72fb927ebdd39b5626e96859dab90/view.pic

sigma77 · October 5, 2011

lolka84,

Например так.

lolka84 · October 5, 2011

Сигма, пардон, как "так" ?

Пока остановился на этом:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>

<style>

.positions {
	width:100%;
	height:197px;
	padding:10px 0;
	background:#000;
	display:table;
}
.positions figure {
	width:20%;
	height:197px;
	display:table-cell;
}
.positions figure div {
	width:171px;
	height:185px;
	background:#666;
	padding:6px;
	margin:0 auto;
}
.positions img {
	width:170px;
	height:149px;
}
.positions figcaption {
	text-align:center;
	margin:10px 0 0 0;
}


</style>

</head>

<body>

        <div class="positions">



	    <figure>

            	<div class="fonL">


            	</div>

            </figure>

	    <figure>

            	<div class="fonLl">


            	</div>

            </figure>

	    <figure>

            	<div class="fonC">


            	</div>

            </figure>

	    <figure>

            	<div class="fonRr">


            	</div>

            </figure>

	    <figure>

            	<div class="fonR">


            	</div>

            </figure>



    	</div>



</body>
</html>

Но в таком варианте блоки смещены к центру, хотелось бы, что б все таки крайние были прижаты к краям..

Edited October 5, 2011 by lolka84

sigma77 · October 5, 2011

Сигма, пардон, как "так" ?

Ссылку забыла вставить :facepalmxd:

http://jsfiddle.net/n3bAN/

lolka84 · October 5, 2011

Хороший вариант, спасибо) Натолкнула на одну интересную идею

Sign In

div съезжает вниз

Question

lolka84

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

lolka84

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

lolka84

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

lolka84

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

lolka84

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information