Hardone PSD to HTML 작업

Question

PSD에서 HTML로 변환하는 데 어려움이 있습니다. 섹션 # 2를보십시오 - 해당 섹션에서 작업은 다음과 같습니다 : 두 개의 블록이 동일 높이 여야하며, 액체가 아니어야하며 javascript (any-jquery 등 ..) 사용법! 나는 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>