我完全思维障碍了,需要你的帮助!谁能解释一下为什么这些 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/
非常感谢您的帮助。
最佳答案
您的父 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%,以便它们堆叠。
关于html - CSS 移动响应 div 表不会彼此相邻 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19281387/