Question

我一直在尝试我能想到的所有内容，以便正确地堆叠两列并且仍然没有钉它。我确定有多种方法可以做到。

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

 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
    }
}

因此，当你浮动元素来制作列时，你可以给它们100％宽度，这将把所有其余的浮动列推到100％块之下。

哦，在您的媒体查询之前的最后一个CSS样式中，您关闭它a）将其更改为}

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

Answer 2

你是浮动flatcontent类，导致所有这些都浮动而不是分成列。您可以为每列使用flatwrapper，当媒体查询命中所需的断点时，将该类的float更改为'none'，以便它在另一个flatwrapper div下面堆叠。

2列设计与堆叠顺序

2 个答案: