곤란한 상황에서 말 줄임 해야할 경우

CASE 1

* 조건

조건 1 영역 1 이미지 사이즈는 유동적이다

조건 2 영역 2 는 영역 1에 영향을 받아 가변 width에서 말줄임 한다.

조건 1 영역 3 은 고정적인 위치에 위치한다.

*구조

.name_card - 전체를 감싸는 영역

ㄴ .thumbnail - 영역 1

ㄴ .image - 이미지

ㄴ . information_area - 영역 2

ㄴ .title - 제목

ㄴ .description - 지점

ㄴ .more_area - 영역 3

*정리    

1. 전체를 감싸는 태그(.name_card)에 아래와 같은 속성을 준다.

2. 영역 1은 float

3. 영역 2는 none float (포인트)

4. 영역 3은 absolute

CASE 2

* 조건

조건 1 영역 1 이미지 사이즈는 고정이다

조건 2 영역 2 는 말줄임 되지 않는다.

조건 3 영역 3 은 말줄임된다.

조건 4 영역 4는 오른쪽에 고정적으로 위치하며, 요소들은 왼쪽에 각각 마진을 갖고 있다.

*구조 (포인트)

.store_link- 전체를 감싸는 영역

ㄴ .thumbnail - 영역 1

ㄴ .logo - 이미지 wrapper

ㄴ .image - 이미지

ㄴ .count_set - 영역 4

ㄴ . information_area - 영역 2 , 3

ㄴ .title - 영역 2

ㄴ .description - 영역 3

*정리    

1. 영역 1 float: left

2. 영역4  float: right;

3. .information_area(영역 2,4 감싸는 태그) 는 none float(포인트)