Question

所以我正在学习使用flexbox，它工作得很好，直到我试图在一些包裹的物品上使用它。当发生这种情况时，整个区块向下移动被包裹物体的数量。只需清除汽车上方的顶部和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，因此相邻元素将在布局中尊重其原始位置。

在您使用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会创建大量空白并向下移动它正在影响的对象

1 个答案: