Html CSS mobile responsive div表不会相邻浮动
我完全被思想所束缚,需要你的帮助!谁能给我解释一下为什么那些div不能并排浮动Html CSS mobile responsive div表不会相邻浮动,html,css,mobile,Html,Css,Mobile,我完全被思想所束缚,需要你的帮助!谁能给我解释一下为什么那些div不能并排浮动 <div class="table"> <div class="row1"> <div class="tableCellHead" id="tableDayA">Datum - Tag</div> <div class="tableCellHead" id="tableHead">
<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>
这个看起来像这样。目标是使这些div彼此相邻浮动
非常感谢您的帮助。您的父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%,屏幕尺寸更小,因此它们可以堆叠。看看你给类命名的是什么……你不应该改用
吗?ID在HTML文档中必须是唯一的。这就是重点,我必须基于divs制作平板电脑。顺便说一句,问题是我不能修改html。你认为问题就出在身份证上吗?你确定吗?对于表格数据来说,表格是完全可以接受的——这正是您似乎需要它们的原因。诀窍是让它们在移动设备上转换成完全不同的样子。没有javaScript,表不允许这样做。
div.table {
width: 100%;
}