CSS浮动div与它们之间的边距(示例中的img)

时间:2011-05-21 19:59:19

标签: html css css-float

这可能是一个经典问题,但我似乎无法找出解决方案。我有一些需要包装在容器中的div。通过添加float: left和固定宽度,这非常简单。

但是,如何在右手卡上没有保证金的情况下获得保证金。这些div是动态生成的,所以我不能在第二个div上使用不同的类来定位它。

有什么想法吗?

float trickiness

3 个答案:

答案 0 :(得分:1)

如果我想在没有脚本或后端干预的CSS中严格执行此操作,我可能会使用nth-child属性:

<强> CSS

.card { width: 60px; height: 100px; background-color: #ededed; border: 1px solid #999; }
.card:nth-child(even) { float: left; }
.card:nth-child(odd) { float: right; }
#container { width: 130px; }
#header { width: 100%; color: #fff; background-color: #000; margin-bottom: 3px; }

<强> HTML

<div id="container">
    <div id="header">header</div>
    <div class="card">0</div>
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
</div>

http://jsfiddle.net/bpMCB/

当然,您必须使用尺寸来适应您想要做的事情。

答案 1 :(得分:1)

可能想尝试:

http://snook.ca/archives/html_and_css/getting_your_di

我提出的另一种方法是,你需要为包含div的空间提供空间:

<style>
    #container {
        background: white;
        width: 510px;
        height: 610px;
        position: absolute;
    }
    #container2
    {
        width: 520px;
        position: absolute;
    }
    .card {
        background: grey;
        margin: 5px;
        float: left;
        width: 250px;
        height: 300px;
    }
</style>

<div id="container">
</div>
<div id="container2">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

答案 2 :(得分:0)

我有时使用的一个技巧是添加一个额外的更宽的div以允许浮动然后隐藏顶级div上的任何重叠。没有示例很难解释 - so here is one

.inner div包含float,因为它的宽度为10px,而.outer div则为10px。

HTH:)