Hardone PSD для HTML задачи - PullRequest
Новая
       34

Hardone PSD для HTML задачи

1 голос
/ 09 февраля 2012

У меня есть некоторые трудности с преобразованием PSD в HTML. Пожалуйста, посмотрите на раздел № 2 - в этом разделе задача следующая: два блока должны быть одинаковой высоты, должны быть жидкими и НИКАКОГО использования javascript (любого - jquery и т. Д.)! Я провел исследование в этом PSD для преобразования HTML - Это моя версия Вот полное изображение PSD 

My variation sheme:
/---------------------------------\
|              |  |                |
| sdfdsfsdf    |S |  fsdfdsfsdf    |
| fdsfsdfds    |P |  fdfsdfsfsd    |
|              |A |  sdffsdf       |   
|              |C |                |
|              |E |  fsdfssf       |
|              |  |  sdfsfs        |
|              |  |  gdf           |
\---------------------------------/
This go messy with IE6 and small resolutions - <400px

Два блока с закругленными углами - они должны быть одинаковой высоты

Я забыл добавить, что поддержка IE6 является обязательной: (* ​​1010 *

Ответы [ 3 ]

1 голос
/ 29 ноября 2015

Вы можете использовать отображение таблицы css, чтобы сделать 2 блока равными по высоте: 

.container {
  display: table;
  height: 300px;
  width: 500px;
  border: 1px solid #000;
  border-radius: 10px;
}
.column {
  display: table-cell;
  vertical-align: top;
}
.column.one {
  background-color: #00c8d2;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.column.two {
  background-color: #bababa;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
<div class="container">
  <div class="column one">
  </div>
  <div class="column two">
  </div>
</div>
1 голос
/ 09 февраля 2012

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

<div class="wrapper">
  <div class="left">
   content
  </div>
  <div class="right">
    content
  </div>
</div>

.wrapper{ width:1024px; display:table;}
.left,.right{display:table-cell; width:500px;margin:0 6px}

, но это отображение: ячейка таблицы не будет работать в IE 6.

, в этом случае вы можете использовать отступ и отрицательное поле, например 

.left,.right{float:left; width:500px; padding-bottom:2000px; margin-bottom:-2000px; }
0 голосов
/ 09 февраля 2012

почему бы вам не использовать простую структуру <table><tr><td>Content</td><td>Content</td></table>, которая будет поддерживаться во всех браузерах.

...