空格和边距不一致

Question

我已经制作了一些html和css设置，并且由于某种原因，小div之间的边距也有所不同。

我不知道这是否也是我下一个问题的原因，但是如果你试图调整窗口的宽度，我已经进行了设置，以便在有＆时使用新的div ＃39;宽度足够的空间。

如上图所示，顶行在两个div之间应用17px页边距，而底行仅有14px页边距。这会导致只有底行获得新div的问题。

我做了一个小提琴http://jsfiddle.net/z3d8M/这样你就可以看到我的代码示例了。你可以看到你是否在宽度上调整窗口大小，有些部分在其他部分之前应用了div，我真的希望它是均匀的。希望没有涉及任何类型的JavaScript。

我的CSS：

/* CONTAINER */
.container {
    z-index:10;
    position: absolute;
    padding-top:50px;
    left:0;
    right:0;
    background: lightgrey;
}

    .container section.dsv {
        width:100%;
        background: red;
        margin-bottom: 40px;
        position: relative;
        height: 340px;
    }

    .container section.dsv.landscape {
        height: 400px !important;
    }

    .container section.dsv .dsv_inner {
        position: absolute;
    }

    .title {
        font-weight: 300;
        font-size: 30px;
        margin-left: 215px;
        margin-bottom: 20px;
    }

/* CARDS */
.card_list {
    margin-left: 215px;
    max-height: 320px;
    min-width: 680px;
    overflow: hidden;
    position: relative;
    margin:20px 10px 20px 215px
}

.landscape .card_list {
    max-height: 370px !important;
}

    .card_list .breaker {
            width:165px;
            margin:0 7px;
            height: 300px;
            display: inline-block;
            background: none;
            float: left;
        }

        .card_list .breaker.double {
            width:346px !important;
        }

.card_wrapper {
    margin:0 7px 20px 7px;
    width:165px;
    height: 300px;
    background: white;
    display: inline-block;
    overflow: hidden;
}

    .landscape .card_wrapper {
        width: 346px !important;
        height: 170px !important;
        margin:0 7px 14px 7px;
    }

我的HTML：

<!-- CONTAINER -->
    <div class="container">

        <!-- category section -->
        <div class="title">Lorem Ipsum?</div>
        <section class="dsv" style="">
            <div class="dsv_inner">

                <div class="card_list">
                    <div class="breaker"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div><div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div><div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div><div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                </div>

            </div>
        </section>

        <div class="title">Dolor sit amet</div>
        <div class="card_list">
            <div class="card_wrapper"></div>
            <div class="card_wrapper"></div>
            <div class="card_wrapper"></div><div class="card_wrapper"></div>
            <div class="card_wrapper"></div>
            <div class="card_wrapper"></div><div class="card_wrapper"></div>
            <div class="card_wrapper"></div>
            <div class="card_wrapper"></div><div class="card_wrapper"></div>
            <div class="card_wrapper"></div>
            <div class="card_wrapper"></div>
        </div>

        <!-- category section -->
        <div class="title">dipper dupper</div>
        <section class="dsv landscape" style="">
            <div class="dsv_inner">

                <div class="card_list">
                    <div class="breaker"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div><div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div><div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div><div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                    <div class="card_wrapper"></div>
                </div>

            </div>
        </section>


    </div>

Answer 1

现在根据设计定义您的parent .card_list font-size:0;和内部子div定义font-size:12px; //

就像这样

.card_list{font-size:0;}
.card_list div{font-size:12px;}

<强> demo