html - CSS 移动响应 div 表不会彼此相邻 float

Question

我完全思维障碍了，需要你的帮助!谁能解释一下为什么这些 div 不会彼此相邻 float ？

        <div class="table">
        <div class="row1">
            <div class="tableCellHead" id="tableDayA">Datum - Tag</div>
            <div class="tableCellHead" id="tableHead">BL</div>
            <div class="tableCellHead" id="tableHead">2. BL</div>
            <div class="tableCellHead" id="tableHead">Pokal</div>
            <div class="tableCellHead" id="tableHead">UCL</div>
            <div class="tableCellHead" id="tableHead">UEL</div>
            <div class="tableCellHead" id="tableHead">FIFA</div>
            <div class="tableCellHead" id="tableHead">A-Länderspiele</div>
            <div class="tableCellHead" id="tableHead">U21-Länderspiele</div>
            <div class="tableCellHead" id="tableHead">Sonstiges</div>
        </div>
        <div class="row2">
            <div class="tableCell" id="tableDay">Montag, 07.10.2013</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
            <div class="tableCell" id="tableContent1">lorem</div>
        </div>
        <div class="row3">
            <div class="tableCell" id="tableDay">Dienstag, 08.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
        <div class="row4">
            <div class="tableCell" id="tableDay">Mittwoch, 09.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
        <div class="row5">
            <div class="tableCell" id="tableDay">Donnerstag, 10.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
        <div class="row6">
            <div class="tableCell" id="tableDay">Freitag, 11.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
        <div class="row7">
            <div class="tableCell" id="tableDay">Samstag, 12.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
            <div class="row8">
            <div class="tableCell" id="tableDay">Sonntag, 13.10.2013</div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
            <div class="tableCell"></div>
        </div>
    </div>

.

@media screen and (max-width: 480px) {
body {

}
div#tableDayA {
    margin: 0 auto;
    width: 100%;
    height: 50px;
    background-color: red;
}

div#tableHead {
    clear: left;
    float: left;
    margin: 2px 2px 2px 0px;
    background: green;
    width: 49%;
    display: block;
}

div#tableContent1 {
    clear: right;
    margin: 2px 0px 2px 2px;
    float: right;
    background: pink;
    width: 49%;
    display: block;
}

div#tableDay {
    position: absolute;
    top: 500px;
    float: right;
    background-color: blue;
}
}

这看起来像这样。目标是使这些 div 彼此相邻 float 。

http://postimg.org/image/58j541f63/

非常感谢您的帮助。

Answer 1

您的父 div 是 block 级元素。您必须将它们更改为行内 block 元素。给它们一个宽度，大约每个宽度为 33%。并将它们向左漂浮。更具体地说:

div.row1, div.row2, div.row3, ... {
display: inline-block;
float: left;
width: 33%; // or whatever
}

并且您的 div.table 需要 100% 宽，因为它是父容器:

div.table {
width: 100%;
}

并使用媒体查询将 div.ro1、div.row2 等的宽度在较小的屏幕尺寸下更改为 100%，以便它们堆叠。