Форум

PashPP · #1 (**permalink**) 25.12.2012, 21:23

Пример:

<body>
<div id='one'>
<div id='two'>
<div class='three'><div class='fo'></div></div>
<div class='three'><div class='fo'></div></div>
</div>
</div>
</body>

Как позиционировать по ширине елементы fo так, чтоб они были по горизонтали, например по центру экрана. а по вертикали на своем законном месте в three?

Deff · #2 (**permalink**) 25.12.2012, 21:30

Сообщение от PashPP

Как позиционировать по ширине елементы fo так, чтоб они были по горизонтали, например по центру экрана. а по вертикали на своем законном месте в three

<style>
div.three {
  text-align:center;
}
</style>

PashPP · #3 (**permalink**) 25.12.2012, 21:48

Deff,
Ну так это относительно третьего. не? А мне надо чтоб центрировало четвертый независимо от положения третьего.

Deff · #4 (**permalink**) 25.12.2012, 21:54

Сообщение от PashPP

Ну так это относительно третьего. не? А мне надо чтоб центрировало четвертый независимо от положения третьего.

Изобразите схематично цветными прямоугольниками с помеченными селекторами - итоговое нужное взаимное расположение на странице данных элементов

PashPP · #5 (**permalink**) 25.12.2012, 22:10

Deff,

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style>
#one {
  position: relative;
  width: 500px;
  height: 900px;
  background-color: silver;
}
#two {
  width: 400px;
  height: 300px;
  margin-bottom: 100px;
  position: relative;

  background-color: red;
  padding: 25px;

}
.three {
  float: left;
  width: 190px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
}

.fo {
  position: absolute;
  top:200px;
  width: 390px;
  height: 200px;
  background-color: green;
  border:1px solid gray;
}

</style>
</head>
<body>
<style>

</style>
<body>
<div id='one'>
<div id='two'>
<div class='three'><div class='fo'></div></div>
<div class='three'><div class='fo'>Я должен быть на одном месте со своим зеленым братом слева.</div></div>
</div>

<div id='two'>
<div class='three'><div class='fo'></div></div>
<div class='three'><div class='fo'>Я тоже должен быть на одном месте со своим зеленым братом слева, но высота меня устраивает</div></div>
</div>

</div>
</body>

</body>
</html>

Deff · #6 (**permalink**) 25.12.2012, 22:24

PashPP,
Итоговое размещение картинкой с указанными селекторами, поскольку не понятно как надо в итоге

PashPP · #7 (**permalink**) 25.12.2012, 22:27

Deff,
Deff,

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style>
#one {
  position: relative;
  width: 500px;
  height: 900px;
  background-color: silver;
}
#two {
  width: 400px;
  height: 300px;
  margin-bottom: 100px;
  position: relative;

  background-color: red;
  padding: 25px;

}
.three {
  float: left;
  width: 190px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
}

.fo {
  position: absolute;
  top:200px;
  width: 390px;
  height: 200px;
  background-color: green;
  border:1px solid gray;
}

</style>
</head>
<body>
<style>

</style>
<body>
<div id='one'> я one
<div id='two'> я two
<div class='three'>Я .three<div class='fo'>Я .fo На самом деле нас тут двое, но один спрятался за моей спиной. Но общая картинка должна быть такая</div></div>
<div class='three'></div>
</div>

<div id='two'>
<div class='three'><div class='fo'>Я .fo .На самом деле нас тут двое, но один спрятался за моей спиной</div></div>
<div class='three'></div>
</div>

</div>
</body>

</body>
</html>

Deff · #8 (**permalink**) 25.12.2012, 22:40

PashPP,
блин - какая из картинок верная - ? или обе ?
Какие нюансы - уточнения ? Т.е пояснения: Ваша загвоздка в чем ?

(В Граф редакторе занчительно проще рисовать и пояснять!

PashPP · #9 (**permalink**) 25.12.2012, 22:50

Deff,
Во втором посте с примерами вся картинка верная. Но чтоб добиться ее, я убрал один из дивов.

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

Хм. Я тут подумал. что можно сделать табличко или использовать :nth-child(2n). Но первое не хочу, ткк тоже не совсем подходит, а второе ишак не потянет.

Deff · #10 (**permalink**) 25.12.2012, 22:56

Сообщение от PashPP

относительно окна или еще лучше прародителя.

ну тогда у прародителя position:relative; и у .foo

Форум

Справочник

Discord чат

Курсы javascript