固定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

固定DIV问题

回答

相关问题