내가 구글 리더의 목록보기에 비슷한 UI를 만들고 싶어

Question

구글 리더/Gmail의 목록보기 만드는 방법 : 명확한 폭이다

1. 스타

   http://dl.dropbox.com/u/2792776/screenshots/2011-12-24_1807.png

   즉,/높이와 먼 왼쪽에 고정됩니다

2. 다음 제목과 본문 미리보기가 온다. 창 크기를 조절하면이 내용은 점차적으로 좁은 창
3. 날짜는 일정한 너비/높이이며 도전 때 행동이 올바른지고 맨 오른쪽

에 고정에 대한 응답으로 사라 창 크기가 조정됩니다. 윈도우가 축소 될 때 변경해야하는 유일한 것은 신체 미리보기의 오른쪽 단어가 점차 사라집니다 (더 이상있을 때, 제목에서 단어가 사라지지한다)이다 :

Answer 1

당신 절대 및 상대적 CSS 위치 지정을 사용하여 일종의 제약 시스템을 생성 할 수 있습니다. 이 HTML을 감안할 때

:

<ul> 
    <li> 
     <div class="left">Left content</div> 
     <div class="center">Really long center content that will get truncated if you were to resize the window</div> 
     <div class="right">Right content</div> 
    </li> 
</ul> 

부모합니다 (li)이 상대적으로 위치하는 경우, 당신은 left/right/width 및 top/bottom 사용하여 어린이합니다 (div 요소)에 절대 위치를 사용할 수 있습니다/height. 다음은 예입니다.

ul li { 
    position: relative; /* Parent has relative positioning */ 
} 

ul li div { 
    position: absolute; /* Children have absolute positioning */ 
} 

ul li .left { 
    left: 0;    /* The left div should be all the way to the left */ 
    width: 100px;   /* Static width of the left section */ 
} 

ul li .right { 
    right: 0;    /* The right div should be all the way to the right */ 
    width: 100px;   /* Static width of the right section */ 
} 

ul li .center { 
    left: 100px;   /* Static width of the left section */ 
    right: 100px;   /* Static width of the right section */ 
} 

이 예제는 http://jsfiddle.net/69TVf/1/에 게시했습니다.