플로팅 요소가없는 2 열 레이아웃?

어떻게 float를 사용하지 않고 div를 나란히 배치 할 수 있습니까? 나는 내가 플로트를 사용하지 말아야한다는 것을 몇 번 읽었 기 때문에 묻고있다. 또는이 특별한 경우에 요소를 배치하는 가장 좋은 방법은 아직 부동입니까? 당신은 몇 가지 옵션이플로팅 요소가없는 2 열 레이아웃?

출처

2013-02-20 devotchkah

을 일반적인 레이아웃을 위해, 수레 열을 만들기위한 가장 쉽고 가장 안전한 옵션입니다. 데이터 표 및 HTML 전자 메일의 경우 표를 사용하여 표를 만드는 것이 적절한 방법입니다. 그 이상으로, 각 경우에 귀하의 구체적인 필요가 무엇인지에 대한 문제입니다. –

...

절대 위치 COL1 폭 : 50 % 왼쪽 : 0 % COL2 폭 : 50 % 왼쪽 : 50 %
고정 위치 "같은 이상하지만 방해로
테이블 레이아웃 "스크롤과, 순수 주의자는 항의한다하더라도, 그것은 제대로

출처

2013-02-20 15:18:25

첫 번째 옵션이 작동하는 것 같지만 지금은 또 다른 문제에 직면 해 있습니다. 두 div는 고정 너비와 채우기가있는 래퍼 div 안에 있습니다. 절대 위치 지정은 패딩을 죽입니다. – devotchkah

@devotchkah - 외부 래퍼 패딩과 일치하는 절대 div에 margin-left와 margin-right를 추가 할 수 있습니다. –

네, 그게 효과가있을 거라 믿습니다.하지만 다른 div에 여백이나 패딩을 추가 할 필요가 없도록 래퍼에 패딩을 추가했습니다. – devotchkah

http://jsfiddle.net/9LaJt/

,691를 작동합니다

당신은에서 살펴 보셔야합니다 :

display: inline-block

마크가 말했듯이, 기준 aligment을 피하기 위해 :

vertical-align: top

출처

2013-02-20 20:27:02 Raffael

굉장해! 하지만 일부 콘텐츠를 추가 할 때 어떤 일이 발생하는지 살펴보십시오. http://jsfiddle.net/xvcDT/ – devotchkah

인라인 요소는 항상 줄의 맨 아래에 배치됩니다. 수동으로 높이를 설정할 수 있습니다. – Raffael

인라인 요소 _default_ 기준 수직 위치 지정. 수직 정렬을 설정할 수 있습니다 : 위쪽; http://jsfiddle.net/rFwtv/3/ – Mark

플로팅 요소가없는 2 열 레이아웃?

답변

관련 문제