Question

我在进行PSD到HTML转换方面遇到了一些困难。请看第2节 - 在该部分，任务如下：两个块必须是相同的高度，必须是液体和没有javascript（任何 - jquery等..）用法！我已经完成了PSD到HTML转换的研究 - This is my version Here is the full PSD image

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的支持是必须的：（

Answer 1

为了获得与你的情况相同的高度，你可以使用足够简单的表格。但我总是建议使用div布局，对于div布局，您可以使用显示属性。 e.g

<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}

但是这个显示：table-cell在IE 6上不起作用。

在这种情况下，您可以使用填充和负边距，例如

.left,.right{float:left; width:500px; padding-bottom:2000px; margin-bottom:-2000px; }

Answer 2

您可以使用表格显示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>

Answer 3

为什么不使用支持所有浏览器的简单<table><tr><td>Content</td><td>Content</td></table>结构。

Hardone PSD转为HTML任务

3 个答案: