컨테이너에 있는 4개의 DIV에 대해 유동적 폭과 균일한 간격을 달성하는 방법은 무엇입니까?

동일한 간격의 DIV가 있는 유동 폭

질문:

유동 폭 컨테이너가 있습니다. 각각 고정된 크기를 갖는 4개의 DIV가 있는 DIV입니다. 상자 1을 왼쪽으로, 상자 4를 오른쪽으로, 상자 2와 3을 그 사이에 균등하게 띄우면서 브라우저 창 크기가 변경될 때 유동적인 간격을 유지하려면 어떻게 해야 합니까?

**답변:

완전한 예는 제공된 JSFiddle을 참조하세요. http://jsfiddle.net/thirtydot/EDp8R/

설명:

이 솔루션은 원하는 레이아웃을 얻기 위해 여러 기술을 활용합니다.

• text-align: justify;: 이는 DIV를 정렬합니다. 수평으로, 그 사이에 공간을 분배합니다.
• .stretch: 너비가 100%로 설정된 범위입니다. 컨테이너의 남은 너비를 채우기 위해 확장됩니다.
• display:inline-block; *디스플레이:인라인; Zoom:1;: IE6/7에 대한 인라인 블록 동작을 보장합니다.
• font-size: 0; line-height: 0;: IE6의 인라인 블록으로 인해 발생하는 수직 공백을 방지합니다.

이러한 기술을 결합하면 DIV가 유동적이고 균일한 간격으로 배치되며 원하는 대로 부동하게 됩니다. 컨테이너 너비.

위 내용은 컨테이너에 있는 4개의 DIV에 대해 유동적 폭과 균일한 간격을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!