Hardone PSD to HTML任务

我在做PSD到HTML转换时遇到了一些困难。请参阅第2节 - 在该部分中，任务如下：两个块的高度必须相等，必须是液体和无javascript（任何 - jquery等）的用法！我已经做了研究在PSD为HTML转换 - This is my version Here is the full PSD image Hardone PSD to HTML任务

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的是必须:(

来源

2012-02-09 Vladimir Lukyanov

[全局统计资料]（http://gs.statcounter.com/#browser_version-RU-每月-201201-201202）表示你有1.13％的IE6用户，微软已经放弃了对IE的任何支持，现在任何合法的Windows安装都会自动要求用户更新他们的浏览器。现在是时候告诉你的老板/客户，那里不会有任何IE。 – Norris 2012-02-09 09:18:15

为了达到块的高度相等像你的情况，你可以利用它足够简单，使用表的，但我总是建议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; }

来源

2012-02-09 08:11:35 Abhidev

我忘了补充一点，IE6的支持是必须的：（ – 2012-02-09 08:15:57

我编辑了我的答案...检查它 – Abhidev 2012-02-09 09:08:07

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

来源

2012-02-09 09:11:48 Gurvinder

可以使用表显示的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-29 15:03:55

Hardone PSD to HTML任务

回答

相关问题