0

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

浮动 div

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

这是一个基本的小提琴

4

2 回答 2

2

您必须为您的解决方案使用内部 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 代替。演示

于 2012-08-30T19:54:36.853 回答
0

问题是您需要 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;

}​
于 2012-08-30T20:09:08.477 回答