0

我完全精神错乱了，需要你的帮助！谁能解释我为什么那些 div 不会并排浮动？

        <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 彼此相邻浮动。

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

真的很感激帮助。

4

1 回答 1

2

您的父 div 是块级元素。您必须将它们更改为内联块元素。给它们一个宽度，每个大约 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%，以便它们堆叠。

于 2013-10-09T20:45:32.163 回答