Hardone PSDからHTMLへのタスク

Question

PSDからHTMLへの変換にはいくつかの困難があります。セクション2を見てください - そのセクションでは、タスクは次のとおりです：2つのブロックは同じ高さでなければならず、液体でなければならず、javascript（any-jquery etc ..）私は、HTMLへの変換そのPSDの研究を行ってきた - This is my versionHere 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レイアウトを、お勧めします。例えば

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

が、この表示：テーブルのセルを使用すると、

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

Answer 2

は、なぜあなたが使用していないパディングと負のマージンなどを利用することができ、その場合にはIE 6

上では動作しません単純な<table><tr><td>Content</td><td>Content</td></table>構造は、すべてのブラウザでサポートされます。あなたは2ブロックが同じ高さにするためにテーブル表示CSSを使用することができ

Answer 3

：

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