Форум

София · #1 (**permalink**) 12.05.2011, 15:03

Здравствуйте.
Задача следующая: есть 2 дива и их надо разместить симметрично по отношению друг к другу (как бы по центру).
Не могу доходчиво объяснить, так что привожу код.
Слева у меня див с меню, остальное - див с контентом. В этом диве уже я размещаю 2 блока.
<html>
<head>
</head>
<body>
<div id="menu" style="width:240px">
</div>
<div id="content" style="margin-left:241px">
<div id="col">
<img src="..." width="240px" style="float:left">
</div>
<div id="jew">
<img src="..." width="240px">
</div>
</div>
</body>
</html>

Насколько я поняла, в пхп нет возможности узнать ширину окна браузера, а только в JavaScript.
Добавляю после отображения дивов такой код
<script language="javascript">
/*определяю размер отступа*/
var width=Math.round((document.documentElement.clientW idth-240-240*2)/3);
document.getElementById('col').style.paddingLeft=w idth;
document.getElementById('jew').style.paddingLeft=w idth;
</script>

Отступов нет.

Возможно как-то можно через css сделать типа блок контента ширина 100%, а эти 2 блока по 50% и выровнять рисунок по центру. Но как тогда определить для блока контента, что он 100%?

София · #2 (**permalink**) 12.05.2011, 15:10

И даже когда я определила, что эти 2 блока занимают 50% от ширины блока контента и разместила их по центру, то получается, чтол отступы слева и справа от изображений в 2 раза меньше, чем между изображениями.

Magneto · #3 (**permalink**) 12.05.2011, 15:46

<html><head>
<style type="text/css">
*{
  padding:0;
  margin:0}

#menu{
  width:240px;
  height:400px;
  float:left;
  background:#fcc}

#content{
  height:400px;
  margin-left:240px;
  background:#cfc}
#col, #jew{
  width:240px;
  height:240px;
  position:relative}

#col{
  left:33.3%;
  margin-left:-160px}

#jew{
  left:66.7%;
  margin-left:-160px}
</style>
</head><body>
  <div id="menu"></div>
  <div id="content">
    <img src="i1.jpg" id="col">
    <img src="i2.jpg" id="jew">
  </div>
</body></html>

Демо.

София · #4 (**permalink**) 12.05.2011, 16:10

Большое спасибо. Заработало.
Один вопрос по теории: как так получилось, что пришлось прописывать margin-left:-160px;?

Magneto · #5 (**permalink**) 12.05.2011, 16:29

2/3 (или 66,6%) от размера изображения.
240 / 3 * 2 = 160

Форум

Справочник

Discord чат

Курсы javascript