左浮动div的中心容器

Question

虽然很多问题都是关于类似的问题，但他们总是希望所有项目都集中在一起（当然可以使用display:inline-block来完成），但是我需要将最后一行项目整齐地漂浮在左边并且只有中心容器（位于可变容器（主体）本身）。

问题在于，无论我为容器设置了什么display和clear，它都不会占用包含浮动元素的宽度。我很想认为这应该非常简单，但我无法弄清楚如何让它发挥作用。

Here is a basic fiddle来玩。

Answer 1

您必须为解决方案使用内部div：

CSS：

#inner{
    width:396px; /* (100+15*2+2) * 3 */
    margin:auto;
}

HMTL：

<div id="container">
    <div id="inner">
        <div class="block">1</div>
        <div class="block">2</div>
         <div class="block">3</div>
         <div class="block">4</div>
         <div class="block">5</div>
         <div class="clear"></div>
    </div>
</div>​

DEMO和DEMO没有固定的体宽。

UPD：刚刚注意到您不希望修复您的体宽。然后使用width:80%;。 DEMO

Answer 2

问题是您需要2个div来正确居中，然后设置宽度div以包含所有块。然后你可以清除它并使用内部内部div（在我的代码中称为“content”）来控制内部浮动的开始。

更新了你的小提琴： http://jsfiddle.net/h9H8w/8/

// HTML
<div id="container">
    <div id="inner">
         <div id="content">
             <div class="block">1</div>
             <div class="block">2</div>
             <div class="block">3</div>
             <div class="block">4</div>
             <div class="block">5</div>
        </div>
    </div>
</div>​

// CSS
body{
    width: 100%;
}
#container{
    float: left;
    position: relative; 
    left: 50%;
}
#inner{
    float: left;
    position: relative; 
    left: -50%;
    border:1px solid black;
}
#content{width: 500px;}
.clear{
    clear:both;
}
.block{
    float: left;
    width:100px;
    height:50px;
    border:1px solid black;
    margin: 15px;

}​