Css 如何在容器层中均匀地分隔层_Css_Html

Css 如何在容器层中均匀地分隔层

css html

Css 如何在容器层中均匀地分隔层,css,html,Css,Html,我有一个宽度为850px的容器层。在这里面，我有4个层显示为左浮动的内联块，每个层高100px，宽200px 如何将它们隔开，使外部的在容器div的边缘对齐，但在容器div内均匀间隔 css html 我认为最简单的方法是： <style> #content { width: 850px; margin-right: auto; margin-left: auto; border:1px solid #000 } #featured1 { displa

我有一个宽度为850px的容器层。在这里面，我有4个层显示为左浮动的内联块，每个层高100px，宽200px

如何将它们隔开，使外部的在容器div的边缘对齐，但在容器div内均匀间隔

css

html

我认为最简单的方法是：

<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>


#内容{
宽度：850px；
右边距：自动；
左边距：自动；
边框：1px实心#000
}
#特点1{
显示：内联块；
高度：100px；
宽度：200px；
浮动：左；
左边距：0px；
边缘顶部：10px；
背景色：#09F；
}
#特点2{
显示：内联块；
高度：100px；
宽度：200px；
浮动：左；
左边距：16像素；
边缘顶部：10px；
背景色：#09F；
}

有几种方法可以做到这一点。我发现的一个跨浏览器解决方案是使用一个额外的包装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>

这是行不通的，因为你有一个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>

#内容{
宽度：848px；
右边距：自动；
左边距：自动；
背景:#666；
溢出：隐藏；
}
#特色{
显示：内联块；
高度：100px；
宽度：200px；
浮动：左；
左边距：16像素；
边缘顶部：10px；
背景色：#09F；
}
#第一个{左边距：0px；}

可能不是您需要的，但如果IE6支持不重要，则伪选择器非常适合，并避免任何HTML伪造（在IE7、FF3.5中测试）：

CSS:

HTML:

您可能仍然需要调整宽度和边距，但这只是技术的一个演示。对我来说，这似乎是最干净的跨浏览器解决方案，重复的ID是无效的，尽管如前所述，所以应该是这样的：我会说是的。ID将“工作”，但由于偶然而非设计，它们在单个HTML页面的范围内应该始终是唯一的。在本例的上下文中没有什么大不了的，但是如果您想使用JavaScript将行为添加到特征框中，您可能会遇到问题。一般经验法则：使用一个ID来唯一地定位单个元素，使用一个类来定位一组元素，就像在本例中所做的那样

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

#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;
}

#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>

    #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;
    }

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