固定DIV問題

內的另一箇中心的DIV我在這裏嘗試一個非常簡單的過程，基本上是試圖以這主要客戶專區內居中客戶徽標。我剛剛開始使用這個網頁設計業務，雖然我可以閱讀一些解決方案，但我在將它們應用於我的結構時遇到了麻煩。固定DIV問題

基本上我有幾個客戶箱，每個都將有它們內部的PNG圖像：

  <div id="clients"> 
       <div class="client-box">CLIENT LOGO</div> 
       <div class="client-box">CLIENT LOGO</div> 
       <div class="client-box">CLIENT LOGO</div> 
       <div class="client-box">CLIENT LOGO</div> 
       <div class="client-box">CLIENT LOGO</div> 
      </div>

我希望能夠居中客戶框的上有客戶的DIV一個固定的重量。我已經使用顯示嘗試：inline-block的，但似乎並沒有做太多。我猜想那是因爲我已經迫使他們浮動：左，但我不知道我怎麼能維持其在div位置，而這樣做。就像我說的，我是一個CSS新手，這是我爲我所有的CSS所做的。

下面是我對客戶和客戶盒CSS：

  #clients { 
      background-image: url("img/images/clients_bg.png"); 
      border-bottom: 1px solid #333333; 
      border-top: 1px solid #666666; 
      float: left; 
      margin-top: 120px; 
      padding: 10px; 
      width: 778px; 
      } 
      .client-box { 
      background: none repeat scroll 0 0 #bcb546; 
      float: left; 
      font-family: verdana; 
      font-size: 11px; 
      height: 60px; 
      margin-right: 10px; 
      opacity: 0.8; 
      padding-top: 40px; 
      text-align: center; 
      width: 100px; 
      } 
      .client-box:hover { 
      opacity: 1; 
      }

從我的理解，這不應該是很難實現的，但到目前爲止，我還沒有得到任何運氣可能是因爲我的大腦專注於某種做事方式，它不會讓步。任何幫助將不勝感激。

你可以看到直播現場here。

謝謝你。

來源

2011-06-15 Andy Hassan

我一直在使用顯示器的嘗試：inline-block的但似乎並沒有做太多。

float: left部隊display: block，所以display: inline-block將不起作用。

在.client-box，您需要：

刪除float: left
添加display: inline-block。

最後，在父元素（#clients）上，您需要添加text-align: center。

enter image description here

來源

2011-06-15 18:04:25 thirtydot

非常感謝你十三歲，完美地工作。 – 2011-06-15 18:13:29

沒問題。如果你需要這個在IE7中工作，請看這裏：http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575 – thirtydot 2011-06-15 18:16:28

@Stratego：I拒絕了您的建議編輯，因爲在這種情況下，差距似乎是需要的。 – thirtydot 2011-06-15 18:17:39

我將一個包裝添加到客戶端盒，其寬度等於客戶端盒的總寬度。

例如，你在上面發帖，直播現場有5個客戶端箱，他們每個人都是100px的寬度與10px的保證金的權利。因此，添加寬度爲5 x（100 +10）= 550px的div包裝，並用「margin-left：auot」和「margin-right：auto」將包裝居中放置。

<div style="width: 550px;margin-left: auto; margin-right: auto;"> 

       <div class="client-box">CLIENT LOGO</div> 
       <div class="client-box">CLIENT LOGO</div> 
       <div class="client-box">CLIENT LOGO</div> 
       <div class="client-box">CLIENT LOGO</div> 
       <div class="client-box">CLIENT LOGO</div> 
</div>

來源

2011-06-15 18:13:03 yzandrew

雖然有效，但標誌隨時會發生變化，因爲有些人會被添加進來，並且每次做這麼多數學工作似乎有點麻煩。我現在已經使用了@thirtydot的解決方案，但會牢記在心。我感謝你花時間寫這個解決方案yzandrew。 – 2011-06-15 18:16:38

您可能會遇到的一個問題是，「display：inline-block」不適用於IE7。定義類似 .myInlineBlock { \t \t display：inline-block; \t vertical-align：top; \t/*對於IE 7 */ \t zoom：1; \t * display：inline; } – yzandrew 2011-06-16 01:10:10

不幸的是，當我在div中添加時，他的解決方案根本不起作用。 – 2011-06-16 02:34:31

如果你的外層div是一個固定的寬度，你可以設置頁邊距爲內部div來佔用適當的空間。如：

<div class="outer"> 
    <div class="inner"> 
     stuff 
    </div> 
</div>

CSS

.outer { width: 600px; } 
.inner { width: 400px; margin-left: 100px; margin-right: 100px; }

或者您可以使用保證金左：自動; margin-right：auto;然而，（像世界上的其他一切）在IE中不起作用。

希望這會有所幫助！

來源

2011-06-15 18:14:28 Inversus

回答

相關問題