html - 左浮动 div 的中心容器

Question

display:inline-block尽管很多问题都是关于类似问题的，但他们总是希望所有项目居中（当然可以使用变量容器（主体）本身）。

问题是，无论我为容器设置什么display，clear它都不会占用包含浮动元素的宽度。我很想认为这应该非常简单，但我不知道如何让它工作。

这是一个基本的小提琴。

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%;then 代替。演示

Answer 2

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

更新了你的小提琴：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;

}​