1

我在进行 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 :(

4

3 回答 3

1

为了在您的情况下获得相同高度的块，您可以使用足够简单易用的表格。但我总是推荐 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}

但是这个 display:table-cell 在 IE 6 上不起作用。

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

.left,.right{float:left; width:500px; padding-bottom:2000px; margin-bottom:-2000px; }
于 2012-02-09T08:11:35.947 回答
1

您可以使用 table display 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>

于 2015-11-29T15:03:55.230 回答
0

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

于 2012-02-09T09:11:48.603 回答