어떻게 플로트 디자인이이 테이블과 같은 결과를 얻을 수 있습니까?

Question

저는 대개 웹 기술 애호가입니다. 저는 테이블이없는 디자인을 선호하지만, 지금은 다소 화를냅니다. :/

나는 테이블에서 극히 쉽게했을 무언가를 이루려하고 있지만, 부동 요소를 사용하면 지나치게 복잡하거나 불가능 해 보입니다. 다음에 봐 :

#info가 고정 폭을 가지고 있으며, #contents 바로 떠 있어야

+-----------------+ +-------+ 
|     | |  | 
| #contents | | #info | 
|     | |  | 
|     | +-------+ 
+-----------------+ 

. #contents은 너비만큼 왼쪽으로 가져 가야합니다.

#contents과 #info이 모두있는 단순한 디자인에서는 너무 복잡하지 않습니다. 둘 다 고정 너비이고 float:left 속성을 가지고 있으며 매우 잘 맞습니다.

그러나 특정 페이지에서는 #info이 표시되지 않습니다. 그렇다면 분명히 #contents은 모든 페이지에 맞게 확장되지 않습니다.

가장 확실한 해결책은 #contents에 고정 너비가 없도록 조정하여 #info을 float:right으로 변경하는 것입니다. #contents이 때 키가 #info보다 열 같은 레이아웃을 나누기 때문에이 필요한 작은 다른 변경 과거, 그것은 정확히 원하는 동작을하지 않았다

+-----------------+ +-------+ 
|     | |  | 
| #contents | | #info | 
|     | |  | 
|     | +-------+ 
|     +---------+ 
|       | 
+---------------------------+ 

더 나쁜

는 #contents 내부에 다른있다 <div>

+-----------------+ +-------+ 
|     | |  | 
| #contents | | #info | 
|-----------------|-|-------| 
|     | +-------+ 
|     +---------+ 
|       | 
+---------------------------+ 

그래서,이 모든 고려, 어떻게, #info에게 고정 폭을 제공 할 수 있습니다 하 다음 border-bottom 속성 집합 및 테두리의 다음과 같은 방식으로 너무 잘 통해 #info 통과 #contents의 오른쪽에 떠 다니지 만, #info이 없을 때, 열과 같은 디자인을 유지하고 #contents이 전체 화면을 차지하게됩니다.이 모든 것이 시각적 인 인공물이없고, 하나 이상의 스타일 시트를 사용하지 않고 있습니까?

는

이 모두 #contents 및 #info가 존재하는 페이지의 원하는 결과가 될 것이다 :

+-----------------+ +-------+ 
|     | |  | 
| #contents | | #info | 
|-----------------| |  | 
|     | +-------+ 
|-----------------| 
|     | 
+-----------------+ 

그리고에만 #contents가 존재하는 페이지의 원하는 결과이다

+---------------------------+ 
|   #contents   | 
|---------------------------| 
|       | 
|---------------------------| 
|       | 
+---------------------------+ 

나는 이것이 너무 혼란스럽지 않았 으면 좋겠다. 나는 뇌의 힘에서 벗어났다.

Answer 1

웹 교사에게 이메일로 이메일을 보내 봤는데 답변이 간단합니다. Internet Explorer (버전 6 이상)에서는 작동하지 않지만 내 경우에는 성능이 떨어집니다.

#info을 float:right으로 설정하면 속성으로 #contents으로 설정하면 충분합니다. 그리고 voilà.

Answer 2

#content div를 너무 뜨면, 마치 누출 된 것처럼 보이지 않으며 #info가 없어지면 전체 페이지가 채워집니다. # 정보가 없으면 #content를 변경할 수 있습니다. #content는 상대 위치와 오른쪽 여백을 가질 수 있으며 위치를 채우기 위해 절대 위치는 #info에 있습니다.