Question

我有一个宽度为850px的容器层。在内部我有4层显示为左侧浮动的内联块，每个都是100px高和200px宽。

我如何将它们隔开以使外部的那些在容器div的边缘对齐但是在内部均匀分布？

css

#content {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
}
#featured {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #09F;
}

HTML

<div id=content>
    <div id=featured></div>
    <div id=featured></div>
    <div id=featured></div>
    <div id=featured></div>
</div>

Answer 1

它并没有真正发挥作用，因为你有一个850px宽的容器，你正试图传播4个200px宽的容器，它们之间有三个排水沟。 4 * 200 = 800所以你有50px的分布，其中分割3个水槽50/3是16.6666ish，这对像素不起作用。

以下作品，但我不知道它对您有多大用处。

#content {
    width: 848px;
    margin-right: auto;
    margin-left: auto;
    background: #666;
    overflow: hidden;
}
#featured {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 16px;
    margin-top: 10px;
    background-color: #09F;
}
#featured.first { margin-left: 0px;}

<div id=content>
    <div id=featured class="first"></div>
    <div id=featured></div>
    <div id=featured></div>
    <div id=featured></div>
</div>

Answer 2

我认为最简单的方法是：

<style>
#content {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
border:1px solid #000
}
#featured1 {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 0px;
    margin-top: 10px;
    background-color: #09F;
}
#featured2 {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 16px;
     margin-top: 10px;
    background-color: #09F;
}
</style>
</head>

<body>

<div id=content>
    <div id=featured1></div>
    <div id=featured2></div>
    <div id=featured2></div>
    <div id=featured2></div>
</div>

Answer 3

有几种方法可以做到这一点。我发现的一个跨浏览器解决方案是使用额外的包装器div并使用它的真实尺寸和负边距来创造。

<div id="content">
    <div class="kludge">
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
    </div>
</div>

我将id=featured更改为类名，因为如果您希望HTML有效，则ID应该是唯一的。

CSS：

#content {
    width: 850px;
    margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
    overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
    width: 900px; /* create room for the right hand margin of last item */
    margin-right: -50px;
}
.featured {
    display: block; /* inline-block not necessary for floated elements */
    height: 100px;
    width: 200px;
    float: left;
    margin: 0 10px;
    background-color: #09F;
}

Answer 4

也许不是你需要的东西，但是如果IE6支持不重要，那么伪选择器是完美的，并且避免任何HTML捏造（在IE7，FF3.5中测试）：

CSS：

    #content {
            width: 848px;
            margin: 0 auto;
            overflow: auto;
    }
    .featured {
            height: 100px;
            width: 200px;
            float: left;
            margin-left: 16px;
            margin-top: 10px;
            background-color: #09F;
    }
    .featured:first-child {
            margin-left: 0;
    }

HTML：

<div id="content">
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
</div>

如何均匀地隔离容器层中的图层

4 个答案: