Flexbox 会创建大量空白并向下移动它所影响的对象

Question

所以我正在学习使用 flexbox 并且它工作正常，直到我尝试将它用于一些包装的项目。当发生这种情况时，整个块向下移动了包裹 object.Just 的数量，以清除此处汽车上方和 lorem ipsum 下方的顶部部分是已移动的部分。

如您所见，那里有很多空白，不应该在那里，直到我使用 flexbox 才出现。但我的目标是仅使用 flexbox 使其包装（因此没有浮动：左诡计）。这是我的代码。 http://jsfiddle.net/0eccdumy

    @import url(https://fonts.googleapis.com/css?family=Roboto);
* {
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 604px) {
    #menu {
        height: 50px;
        width: 99.8%-1px;
        display: flex;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        position: relative;
        z-index: 99;
        background: linear-gradient(#CC0, #EE0);
        padding: 5px 0px 5px 0px;
        border: 1px solid #566;
    }
    body {
        margin: 0px;
        height: 100%;
        background-color: #444;
        font-family: Roboto, sans-serif;
    }
    #ida {
        border-right: 1px solid #111;
        padding: 10px;
        display: block;
    }
    a {
        color: black;
        padding: 10px;
        text-decoration: none;
        font-size: 1.3em;
    }
    div.top {
        height: 100%;
        width: 75%;
        background-color: #F1F1F1;
        margin: 0px auto;
        display: block;
        position: relative;
        border: 5px solid #1F1F1F;
    }
    p {
        display: inline-block;
        font-size: 0.7em;
        margin: 1px;
        color: black;
    }
    .desc {
        display: block;
        top: -31.5%;
        height: 50px;
        width: 100%;
        position: relative;
        background-color: #F5F3F3;
        border-radius: 0px 0px 9px 9px;
    }
    .image {
        height: 110%;
        width: 100%;
        position: relative;
        border-radius: 9px;
    }
    .foot {
        border-top: 1px solid black;
        height: 20px;
        width: 100%;
        top: 38.5%;
        position: relative;
    }
    #footext {
        margin: auto;
        position: relative;
        left: 28%;
        font-size: 0.8em;
        color: grey;
    }
    #Vaerksted {
        height: 110%;
        width: 100%;
        position: relative;
        display: block;
    }
    .Overflow {
        height: 240px;
        width: 99.8%-1px;
        overflow: hidden;
        margin: auto;
    }
    .header {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }
    h3 {
        margin: 0px
    }
    h4 {
        margin: 0px
    }
    .New {
        width: 90%;
        height: 90%;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 15px;
        position: relative;
        background-color: white;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .16);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .16);
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;

    }
    .carfs {
        height: 250px;
        width: 250px;
        border: 1px solid black;
        border-radius: 9px;
        position: relative;
        top: 20px;
        left: 0px;
        margin-left: 10px;
        margin-bottom: 15px;
        display: inline-block;
        overflow: hidden;
    }
    .men0img {
        height: 60px;
        position: relative;
        top: -5px;
    }
    .del3 {
        width: 38%;
        height: 318px;
        float: right;
        position: relative;
        top: -322px;
        left: -12px;
        overflow: hidden;
        border: 1px solid #EAEAEA;
        -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .16);
        box-shadow: 0 2px 2px rgba(0, 0, 0, .16);
    }
    .3delt {
        height: 500px;
        width: 100%;
        position: relative;
    }
    .del1 {
        width: 60%;
        border: 1px solid #C6C8C8;
    }
    .velkommen {
        font-size: 1em;
    }
    .aabningstider {
        height: 100px;
        width: 100px;
    }
    .googlemaps {
        height: 159px;
        width: 345px;
        overflow: hidden;
        top: 20px;
        position: relative;
    }
    .google_maps {
        top: 25px;
        margin-top: auto;
        position: relative;
        overflow: hidden;
    }
    .randlogo {
        height: 56px;
        width: 140px;
        position: relative;
        top: -2px;
        margin-left: auto;
        margin-right: auto;
    }
    #Mc {
        margin-bottom: auto;
        height: 110%;
        position: relative;
        top: -20px;
    }
    .op {


    }
}

现在我的 html

<div class="op">
    <div class="New">
        <div class="header">
            <h3>Nyeste Biler</h3>
        </div>
        <div class="flexit">
            <div class="carfs">
                <img src="Car.jpg" class="image">
                <div class="desc">
                    <p>
                        - Kilometer: 147000 KM
                        <br> - Geartype: Automatgear
                        <br> - Brænsstoftype: Benzin
                    </p>
                    <p>
                        - Farve: Sølv metal
                        <br> - Antal døre: 5 Døre
                        <br> - Type: Stationcar
                    </p>
                </div>
            </div>
            <div class="carfs">
                <img src="Car1.jpg" class="image">
                <div class="desc">
                    <p>
                        - Kilometer: 153000 KM
                        <br> - Geartype: Manuel
                        <br> - Brænsstoftype: Benzin
                    </p>
                    <p>
                        - Farve: Sort metal
                        <br> - Antal døre: 5 Døre
                        <br> - Type: Stationcar
                    </p>
                </div>
            </div>
            <div class="carfs">
                <img src="MC.jpg" class="image" id="Mc">
                <div class="desc">
                    <p>
                        - Kilometer: 72000 KM
                        <br> - Hestekræfter: 96Hk
                        <br> - Brænsstoftype: Benzin
                    </p>
                    <p>
                        - Farve: Rød
                        <br> - Antal døre: 0 Døre
                        <br> - Type: Standard
                    </p>
                </div>
            </div>
            <div class="carfs">
                <img src="AC.jpg" class="image">
                <div class="desc">
                    <p>
                        - Kilometer: 220000 KM
                        <br> - Geartype: Automatgear
                        <br> - Brænsstoftype: Benzin
                    </p>
                    <p>
                        - Farve: Hvid
                        <br> - Antal døre: 4 Døre
                        <br> - Type: Autocamper
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

修改后的答案

问题不在于 flexbox。

问题是你有一个 div – .del3 – 位置相对向上。

因为 .del3 是 relatively positioned，相邻元素将尊重其在布局中的原始位置。

大白色 space 表示 del3 在您使用 top: -322px 向上移动之前的位置。

这是您的布局，top: -322px 被注释掉了：

DEMO

有许多更好的方法可以完成此布局。

当然有 flexbox。

或者您可以使用 absolute positioning 将 del3 从流中移除，这样相邻的框就会忽略它的存在。（确保将父项 – .3delt – 设置为 position: relative。）

或者您可以简单地将 float: left 应用于行中的第一个 div：

.del1 {
    width: 60%;
    border: 1px solid #C6C8C8;
    float: left; /* NEW */
}

.del3 {
    width: 38%;
    height: 318px;
    /* float: right; */
    /* position: relative; */
    /* top: -322px; */
    /* left: -12px; */
    overflow: hidden;
    border: 1px solid #EAEAEA;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .16);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .16);
}

DEMO

原答案

~~尝试从以下位置删除或调整 height: 240px：~~

@media screen and (min-width: 1px) .Overflow { height: 240px; width: 99.8%-1px; overflow: hidden; margin: auto; }

此外，width 规则存在语法错误。试试这个：width: calc(98.8% - 1px);

~~DEMO~~

Flexbox 会创建大量空白并向下移动它所影响的对象

Flexbox creates a lot of whitespace and moves down the object it is affecting

html

css

whitespace

flexbox