2009-06-15 3 views
2

왼쪽으로 떠있는 div가 여러 개 있습니다. 브라우저의 크기를 조정할 때
사용할 수있는 공간이없는 경우 div가
그룹에 집중되도록하는 방법이 있는지 알고 싶습니다.
Rigth 이제 DIV 왼쪽 당신이 내 목표는 브라우저에 3 번브라우저 크기를 조정할 때 여러 개의 부동 div를 가운데에 배치 할 수 있습니까?

+0

자바 스크립트 만 –

+0

자바 스크립트에서는 매우 쉽게이 작업을 수행 할 수 있습니다. 그러나 CSS에서는 그다지 많지 않습니다. – Alsciende

답변

3

예 ... 중앙에 있지,하지만 확인하지 않고, 당신이 그들을 떠하지 않습니다

CSS를

div#container { 
    text-align: center; 
} 

div#container>span { 
    display: -moz-inline-box; /* FireFox 2 */ 
    display: inline-block; /* the rest */ 
    width: 300px; 
    height: 100px; 
    border: solid 1px; 
    margin: 20px; 
} 

HTML

<div id="container"> 
    <!-- SPANs for IE, it has a to be an inline element by default to work --> 
    <span>I'm some span</span> 
    <span>I'm some span</span> 
    <span>I'm some span</span> 
    <span>I'm some span</span> 
    <span>I'm some span</span> 
    <span>I'm some span</span> 
</div> 
2

I처럼 중심으로 계속 float 된 div의 크기를 조정한다는 것이다 나에게

 
1.- 
+++++++++++++++++++++++++++++++++ 
+ +++++++ +++++++ +++++++ + 
+ +++++++ +++++++ +++++++ + 
+ +++++++ +++++++ +++++++ + 
+        + 
+        + 
+++++++++++++++++++++++++++++++++ 

2.- 
++++++++++++++++++++++++++++ 
+ +++++++ +++++++  + 
+ +++++++ +++++++  + 
+ +++++++ +++++++  + 
+       + 
+ +++++++     + 
+ +++++++     + 
+ +++++++     + 
+       + 
++++++++++++++++++++++++++++ 

3.- 
++++++++++++++++++++++++++++ 
+ +++++++ +++++++  + 
+ +++++++ +++++++  + 
+ +++++++ +++++++  + 
+       + 
+ +++++++    + 
+ +++++++    + 
+ +++++++    + 
+       + 
++++++++++++++++++++++++++++ 

Imagine number 3 is centered! 

을 이해할 수있는 나는 당신에게 희망의 '그래픽'을 보여 을 정렬 된 상태로 유지 당신이 많은 끔찍한 해킹이 없이는 많은 행운을 가질 것이라고 생각하지 마십시오. div의가 떴다하는 경우, 왼쪽 또는 오른쪽 중 하나를 떠 될거야 -

1
<style> 
div.wrap { 
    text-align: center; 
    border: 1px solid purple; 
    max-width: 620px; 
    margin: auto; 
    line-height: 0; 
} 
span { 
    width: 200px; 
    height: 100px; 
    border: 1px solid green; 
    display: inline-block; 
    margin-top: 4px; 
} 
</style> 

<div class="wrap"> 
    <span></span> <span></span> <span></span> 
    <span style="border:1px solid yellow;height:0px;margin:0"></span> 
</div> 

본 실시 열쇠가 아래쪽 행 두 eleme 것이다 보장 마지막 스팬이고 nts 대신 하나. 그것 없이는 마지막 상자가 맨 위의 두 개와 함께 왼쪽에 정렬하는 대신 중앙에 배치됩니다. div 래퍼의 최대 너비는 숨겨진 것을 제외하고 모든 요소에 맞게 충분히 정확하게 지정해야합니다. 숨겨진 (하지 표시 : 없음)

(FF3, Safari4, IE7에서 테스트 및 8)

Working Demo 귀하의 사이트에 대한

마지막 기간은 시정 될 것입니다하지만 난 그것을 볼 수 무슨 일이 일어나고 있는지 보여주기 위해 떠났다.

관련 문제