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任務

回答

相關問題