Question

我有以下HTML：

<div id="parent">
     <div class="child">Box1</div>
     <div class="child">Box2</div>
     <div class="child">Box3</div>
     <div class="child">Box4</div>
     <div class="child">Box5</div>
     <div class="child">Box6</div>
     <div class="child">Box7</div>
     <div class="child">Box8</div>
     <div class="child">Box9</div>
     <div class="child">Box10</div>
</div>

以下CSS：

#parent {
   display: inline-block;
   max-width: 1000px;
   height: 500px;
   border: 1px solid #000000;
   text-align: center;
}
.child {
   width: 100px;
   height: 100px;
   border: 1px solid #000000;
   margin: 10px;
   float: left;
}

我希望将子DIV向左移动，同时将它们置于不具有固定宽度的父DIV中。

我不想使用display的原因：子DIV的内联块是如果一行只有1或2个盒子，它们将居中，我希望它们与左边对齐前一行的方框。

第二个原因是使用ajax将加载更多数据。因此，如果最后一行只有1或2个框并且仍然可以容纳更多框，则它们将被插入到新行中而不是附加到最后一行。我不确定这一点，但我认为使用display inline-block会发生什么。浮动而不是没有这种行为。

忘了提一下父母应该显示：inline-block，因为另一个框会在它旁边对齐。

我为你创造了一个小提琴： http://jsfiddle.net/6a2eqpmu/

Answer 1

不幸的是，您无法使用纯CSS执行此操作。如果你愿意使用一些javascript和jQuery，你可以很容易地实现你想要的：

var parent = $('#parent'),
    container = $('#container'),
    children = container.children('.child'),
    width = children.eq(0).outerWidth() + parseInt(children.eq(0).css('margin-left')) + parseInt(children.eq(0).css('margin-right')),
    maxWidth = children.length * width;

function resizeContainer() {
    var newWidth = Math.floor(parent.width() / width) * width;
    if (newWidth <= maxWidth && newWidth > 0) {
        container.width(newWidth);
    }
}

$(window).resize(resizeContainer);

resizeContainer();

Example

Answer 2

只需将margin: 0 auto;添加到#parent即可。当文档宽度超过1000px时，这将使父div居中。

Answer 3

如果您的父元素没有固定的宽度，则只能使用CSS将其子元素居中。我认为你必须编写一些脚本来计算父宽度，每行宽度并设置正确的边距右边距和边距左边。

Answer 4

text-align适用于内联元素。如果我理解你的问题，你应该删除浮动并将框放在display：inline-block。

像这样：http://jsfiddle.net/6a2eqpmu/7/

#parent {
   max-width: 1500px;
   height: 500px;
   border: 1px solid #000000;
   text-align: center;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    margin: 10px;
    display:inline-block; 
}

我添加了html注释以避免出现空白问题，并将最大宽度设置为1500px以便查看框中心。

Answer 5

您可以在内嵌块的末尾添加不可见的占位符。这将左对齐最后一行。

http://jsfiddle.net/aakt65x4/

如果你没有填满第一行，那么整个事物将显示为左对齐。但我认为这就是你想要的。

<强> HTML：

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

<强> CSS：

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}

中心在具有流体宽度的父DIV中浮动子DIV

5 个答案: