中心x浮动数量：左侧divs水平

Question

基本上我想要建立一个大小相同的div的页面，例如100x100，但也有200x100的变体。他们都浮动：左侧调整相应的窗口大小。问题是，我不知道如何让他们集中在那个场景中，有时候说是连续3次或其他时间7，因为通常你会在右侧留出更多的空间，使它看起来不在中心。 在此先感谢！

Answer 1

Are you looking for something like this?设置容器上的自动利润率将水平居中。从那里，您可以浮动或嵌入您的块，以便以您说话的方式显示它们。看看CSS和HTML：

<div class="container"> 
    <div></div> 
    <div class="variant"></div> 
    <div></div> 
    <div></div> 
    ... 
</div> 

这个HTML就像它在语义上一样简单。理想情况下，我通常会将其作为无序列表来执行，但由于标题中标题提到divs，因此我朝这个方向前进。

div.container div{ 
    border: solid 2px black; 
    min-height: 100px; 
    width: 100px; 
    display: inline-block; 
    background-color: white; 
    vertical-align: top; 
    margin: 10px; 
} 
div.container div.variant{ 
    width: 200px; 
} 
div.container{ 
    margin: auto; 
    max-width: 620px; 
    background-color: #ecefec; 
    padding: 10px; 
    font-size: 0; 
} 

JS Fiddle

这是怎么回事就在这里

我们通过内联物业display: inline-block块元素;因此我们需要制定一些附加规则，以便在它们具有不同高度的情况下正确显示（这些将自动清除一行，而不像浮动元素）。

内联元素上的属性vertical-align:top确保排列元素的顶部边界与其兄弟元素的顶部边界齐平。

属性font-size:0可确保在计算块元素之间的间距（否则每个包含一个div标签的关闭与包含另一个div标签的开口之间的空间）时不会考虑标记空白。

这应该完成你正在努力实现的目标。

UPDATE

看着回答另一个问题您的评论后，我们需要添加text-align:center;到容器div的CSS，因为这将中心集装箱内的每一行。

Example

Answer 2

我不太清楚你之后（图像可能会帮助）在做什么，但如果我理解正确的话，你应该能够实现使用inline-block！而非float是你的布局：

• 在你的div上设置display: inline-block，在容器上设置
• 设置text-align: center（或者可能是justify）。

一些阅读上：

• http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
• http://www.ternstyle.us/blog/float-vs-inline-block

Answer 3

你在找什么样的？

HTML：

<div class="container"> 
    <div class="small"></div> 
    <div class="large"></div> 
    <div class="small"></div> 
    <div class="mini"></div> 
    <div class="small"></div> 
    <div class="mini"></div> 
    <div class="small"></div> 
</div> 

CSS：

.container { 
    text-align: center; 
    letter-spacing:-0.25em; 
    word-spacing: -0.25em; 
} 
.small, .large, .mini { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    height: 50px; 
    letter-spacing:normal; 
    word-spacing: normal; 
} 
.small { 
    width: 25%; 
    background: #f00; 
} 
.large { 
    width: 50%; 
    background: #0f0; 
} 
.mini { 
    width: 12.5%; 
    background: #00f; 
} 

Answer 4

如果我理解正确的话，你有一个可变数目是不同宽度的元素，并且要居中元件组水平的页面上。

如果是这样的话，那对我的作品的解决办法是这样的：

HTML：

<div class="container"> 
    <div class="outer"> 
     <div class="inner"> 
      <!-- your elements here --> 
     </div> 
    </div> 
</div> 

CSS：

.container { 
    overflow: hidden; 
} 
.container .outer { 
    float: left; 
    position: relative; 
    left: 50%; 
} 
.container .outer .inner { 
    float: left; 
    position: relative; 
    left: -50%; 
} 

基本上，发生的事情是，.outer DIV向右移动，使其左边缘位于其父元素的中间。然后，.inner向左移动50％，这意味着.inner的中心与.outer的左边缘对齐。最后，.inner及其内容将集中在屏幕上，而不管.inner内元素的总宽度。

使用自动边距要求包含内容的元素具有定义的宽度。该解决方案以牺牲一些非语义标记为代价来绕过这个问题。

这里有一个演示，显示它在行动：

JsFiddle DEMO

Answer 5

HTML：

<div id="container"> 
    <div class="small"></div> 
    <div class="large"></div> 
    <div class="small"></div> 
    <div class="mini"></div> 
    <div class="small"></div> 
    <div class="mini"></div> 
    <div class="small"></div> 
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
#container { 
    margin: 0px auto; 
    overflow: hidden; 
    border: 1px solid #f00; 
    letter-spacing:-0.25em; 
    word-spacing: -0.25em; 
    line-height: 0; 
} 
.small, .large, .mini { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    zoom: 1; 
    height: 50px; 
    letter-spacing:normal; 
    word-spacing: normal; 
    line-height: auto; 
} 
.small { 
    width: 100px; 
    background: #f00; 
} 
.large { 
    width: 200px; 
    background: #0f0; 
} 
.mini { 
    width: 50px; 
    background: #00f; 
} 

jQuery的：

resizeContainer(); 

function resizeContainer() { 
    var containerWidth = 0; 
    $('#container > div').each(function() { 
     var self = $(this); 
     var offset = self.offset(); 
     if (offset.top < 2) { 
      containerWidth += self.width(); 
     } else { 
      $('#container').css('width', containerWidth); 
      return false; 
     } 
    }); 
} 

Answer 6

我有一个解决方案，我认为满足您的需要。它使用媒体查询将容器宽度调整为适合当前视口宽度的块宽度的最大倍数。然后，该容器以自动边距为中心，并且其中的块刚好左对齐。

由于容器始终是块宽度的精确倍数，容器内绝不会有多余的空间。而容器本身也是居中的，所以任何一边的间距都会非常平衡。计算媒体查询有点乏味，所以我更喜欢用SASS来做这件事，但如果你的数据块相当大（如果块越大，媒体越少，你就不需要它们的数量）。查询需要）。

Codepen example using SASS

如果你喜欢更小，或者只是普通的老CSS，我会很乐意提供一个转换。

Answer 7

在这个页面上有很多问题和答案，很难弄清楚OP真正需要什么，但这里是我的帮助尝试。在Josh Burgess in his answer提供的漂亮的jsFiddle的基础上构建。我不确定他的jsFiddle是否已经是Kos或OP之后的，但我想用另一种方法使用flexbox model来补充他的回答，因为这增加了许多其他选项，您可能需要考虑考虑。首先，flexbox模型在过去的几年中一直在进行相当多的改变，一个全新的实现目前是fully supported by Chrome and Opera and partially supported by a number of other major browsers。当涉及到支持下面的示例所需的功能时，我相信它们应该可以在除FireFox以外的所有主流浏览器的所有当前版本中工作。预测Firefox将为fully supporting the new flexbox model in version 22，即scheduled to be released on June 25, 2013。

现在，这里是Josh Burgess jsFiddle的副本，它描绘了与他提供的更新示例jsFiddle完全相同的外观和行为，但使用了flexbox模型来完成此操作。

div.container { 
    margin: auto; 
    max-width: 620px; 
    background-color: #ecefec; 
    padding: 10px; 
    font-size: 0; 

    display: -webkit-flex; /* Chrome */ 
    display: -ms-flexbox;  /* IE 10 */  
    display: flex;   /* Opera 12.1, Firefox 20+ */ 

    /* Chrome */ 
    -webkit-flex-flow: row wrap; 
    -webkit-justify-content: center; 

    /* IE10 */ 
    -ms-flex-flow: row wrap; 
    -ms-justify-content: center; 

    /* Opera 12.1, Firefox 20+ */ 
    flex-flow: row wrap; 
    justify-content: center; 
} 

现在看看会发生什么，当我justify-content值更改为：

• space-between
• space-around
• flex-start或flex-end

如果你没有介意div的n不是一个特定的宽度，你甚至可以将它们设置为自动调整大小的弹性盒，就像我在这个jsFiddle中所做的那样，它可以有效地将div的width变成min-width的。

div.container div { 
    -webkit-flex: auto;  /* Chrome */ 
    -ms-flex: auto;   /* IE10 */ 
    flex: auto;    /* Opera 12.1, Firefox 20+ */ 
} 

无论如何，这是非常强大的东西，我认为。而且，尽管我意识到，在所有主流浏览器中，它仍然不能完美地工作的事实对于任何人来说都可能是一个足够大的障碍，当谈到在当前实际实现这一点时，我相信这个功能应该在页面的问题就像OP的问题。

此外，也许，以防万一Josh Burgess answer仍然不是什么Kos或OP正在寻找，一些提供的jsFiddles（当在浏览器中看到支持他们）可以用来解释究竟是什么他们都是寻找。