html - 2列堆叠顺序设计

Question

我一直在尝试所有我能想到的方法来让两列正确堆叠，但仍然没有成功。我确信有多种方法可以做到这一点。

我正在尝试获得这样的网格，然后是移动友好的堆叠顺序。

 1      2
 3      4
 5      

所以在手机上他们是

1
2
3
4
5

我的 CSS:

<style>
.flatwrapper {
    width: 780px;
}

.flatcontent {
    display: inline-block;
    width: 320px;
    float: left;
    margin: 0 50px 15px 0;
}

.docpic {
    float: left;
    width: 53px;
    height: 75px;
    z-index: 2;
}

.contact {
    position: relative;
    background-color: #2ECC71;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact:hover {
    background-color: #27AE60;
}

.contact2 {
    position: relative;
    background-color: #E67E22;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact2:hover {
    background-color: #D35400;
}

.contact3 {
    position: relative;
    background-color: #3498DB;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact3:hover {
    background-color: #2980B9;
}

.contact4 {
    position: relative;
    background-color: #95A5A6;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact4:hover {
    background-color: #7F8C8D;
}

.contact5 {
    position: relative;
    background-color: #F1C40F;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact5:hover {
    background-color: #F39C12;
}

.boxtext {
    font-size: 12pt;
    color: white;
    opacity: .9;
    font-weight: 300;
    padding-left: 10px;
    padding-top: 18px;
    ) 
@media screen and (max-width: 710px) {
        .flatwrapper {
            width: 320px;
        }
        .flatcontent {
            margin: 0 0 15px 0;
        }
    }
</style>

我的 HTML:

<div class="flatwrapper">
<div class="flatcontent">
    <div class="docpic">
        <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/glanton_75_high.jpg" width="53" />
    </div>
    <a href="tel:5733242241">
    </a>
    <div class="contact">
        <a href="tel:5733242241">
            <p class="boxtext">Dr. Glanton - Pain Management
                <br /> Click to Call (573)629-3363</p>
        </a>
    </div>
</div>
<div class="flatcontent">
    <div class="docpic">
        <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/alvi_75_high.jpg" width="53" />
    </div>
    <a href="tel:5736293300">
    </a>
    <div class="contact2">
        <a href="tel:5736293300">
            <p class="boxtext">Dr. Alvi - Cardiology
                <br /> Click to Call (573)629-3300</p>
        </a>
    </div>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/valuck_75_high.jpg" width="53" />
</div>
<a href="tel:5736293300">
</a>
<div class="contact3">
    <a href="tel:5736293300">
        <p class="boxtext">Dr. Valuck - Cardiology
            <br /> Click to Call (573)629-3300</p>
    </a>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/greving_75_high.jpg" width="53" />
</div>
<a href="tel:5736293400">
</a>
<div class="contact4">
    <a href="tel:5736293400">
        <p class="boxtext">Dr. Greving - Internal Medicine
            <br /> Click to Call (573)629-3400</p>
    </a>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/metlis_75_high.jpg" width="53" />
</div>
<a href="tel:5736293500">
</a>
<div class="contact5">
    <a href="tel:5736293500">
        <p class="boxtext">Dr. Metlis - Plastic Surgeon
            <br /> Click to Call (573)629-3500</p>
    </a>
    </div>
</div>
</div>
</div>

Answer 1

好吧，把你的媒体查询改成这样:

@media screen and (max-width: 710px) {
    .flatwrapper {
        width: 100%;  <-- full width optional I don't know why you wanted it to be 320px
    }
    .flatcontent {
        margin: 0 0 15px 0;
        width:100%;  <-- this needs to be 100% forcing the floated elements to take up all the block space
    }
}

因此，当您 float 元素以构成列时，您可以为它们指定 100% 宽度，这会将所有其余 float 列推到 100% block 下方。

哦，在你的媒体查询之前的最后一个 css 样式中，你用 a) 将其关闭，将其更改为

.boxtext {
font-size: 12pt;
color: white;
opacity: .9;
font-weight: 300;
padding-left: 10px;
padding-top: 18px;
} <-- add this