Question

我完全不知所措，需要你的帮助！谁能解释一下为什么那些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/

非常了解帮助。

Answer 1

您的父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％，以便它们堆叠。

CSS移动响应div表不会彼此相邻浮动

1 个答案: