文章/答案/技术大牛

发布

问Hardone转HTML任务
EN

Stack Overflow用户

提问于 2012-02-09 15:43:37

回答 3查看 273关注 0票数 1

我有一些困难与做PSD到HTML的转换。请看第二节-在这一节中，任务如下:两个块必须相等高度，必须是液体的，并且没有javascript (any - 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的支持是必须的:(

html

psd

回答 3

Stack Overflow用户

发布于 2012-02-09 16:11:36

为了达到等高的积木，就像您的例子一样，您可以使用足够简单的表格。但我总是推荐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}

但是这个display:table-cell在IE6上不能工作。

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

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

票数 1

Stack Overflow用户

发布于 2015-11-29 23:03:55

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

Stack Overflow用户

发布于 2012-02-09 17:11:49

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9207099

复制

相似问题

问Hardone转HTML任务
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Hardone转HTML任务EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Hardone转HTML任务
EN