我有一个表结构,只剩下 div 和 float 。我希望它能够响应(我知道我必须添加媒体查询)。我的代码有问题。现在我想减少它更改为水平滚动的窗口,我试过但它不起作用。
这是我的代码:
<div style="">
<div style="border: 2px solid green;height:100px;width:100%;">
<div style="width:6rem;background:aqua;top: 4.2rem;position:absolute;">FM</div>
<div style="width:6rem;float:left;background:aqua;position: relative;top:2.4rem;">TNT</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">Alarmes</div>
<div style="width:100%;">
<div style="float: left;width:6rem;background:pink;">Criticité</div>
<div style="float: left;width:6rem;background:pink;">Sans Sup</div>
<div style="float: left;width:6rem;background:pink;">Non nominale</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">(chart)</div>
<div style="float: left;width:6rem;background:gold;">2</div>
<div style="float: left;width:6rem;background:gold;">5</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">(chart)</div>
<div style="float: left;width:6rem;background:gold;">10</div>
<div style="float: left;width:6rem;background:gold;">1</div>
</div>
</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">TICKETS</div>
<div>
<div style="float: left;width:6rem;background:pink;">Non nominale</div>
<div style="float: left;width:6rem;background:pink;">A suivre</div>
<div style="float: left;width:6rem;background:pink;">Clôs</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">5</div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">2</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">9</div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">0</div>
</div>
</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">SITES</div>
<div>
<div style="float: left;width:6rem;background:pink;">Perte HF</div>
<div style="float: left;width:6rem;background:pink;">-3DB</div>
<div style="float: left;width:6rem;background:pink;">Décro HS</div>
<div style="float: left;width:6rem;background:pink;">Alarme RX</div>
<div style="float: left;width:6rem;background:pink;">Alarme RX</div>
<div style="float: left;width:6rem;background:pink;">GE</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">8</div>
<div style="float: left;width:6rem;background:gold;">3</div>
<div style="float: left;width:6rem;background:gold;">7</div>
<div style="float: left;width:6rem;background:gold;">1</div>
<div style="float: left;width:6rem;background:gold;">6</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">5</div>
<div style="float: left;width:6rem;background:gold;">4</div>
<div style="float: left;width:6rem;background:gold;">8</div>
<div style="float: left;width:6rem;background:gold;">0</div>
<div style="float: left;width:6rem;background:gold;">2</div>
</div>
</div>
</div>
</div>
最佳答案
第 1 步。从 div
第 2 步使用内联 block 而不是 float 。
第 3 步 使用 display: block
将每个表格行包含在自己的 div
中,除了您想要并排放置的那些,这应该是 inline-block
第四步给父div加上宽度overflow-x: auto;
第 5 步 在您想要并排放置的两个部分周围添加一个非环绕父 div,并将每个部分放入其自己的 div 中
(如果您只想在站点部分滚动,请将其放在带有类容器的 div 中)
HTML
<div class="container">
<div class="no-wrap">
<div class="side-by-side">
<div class="row">
<div> </div>
</div>
<div class="row">
<div> </div>
</div>
<div class="row">
<div class="aqua">FM</div>
</div>
<div class="row">
<div class="aqua">TNT</div>
</div>
</div><!--/side-by-side-->
<div class="side-by-side">
<div class="row">
<div class="red">Alarmes</div>
</div>
<div class="row">
<div class="pink">Criticité</div>
<div class="pink">Sans Sup</div>
<div class="pink">Non nominale</div>
</div>
<div class="row">
<div class="gold">(chart)</div>
<div class="gold">2</div>
<div class="gold">5</div>
</div>
<div class="row">
<div class="gold">(chart)</div>
<div class="gold">10</div>
<div class="gold">1</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="red">TICKETS</div>
</div>
<div class="row">
<div class="pink">Non nominale</div>
<div class="pink">A suivre</div>
<div class="pink">Clôs</div>
</div>
<div class="row">
<div class="gold">5</div>
<div class="gold">-</div>
<div class="gold">2</div>
</div>
<div class="row">
<div class="gold">9</div>
<div class="gold">-</div>
<div class="gold">0</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="double-red">SITES</div>
</div>
<div class="no-wrap">
<div class="side-by-side">
<div class="row">
<div class="pink">Perte HF</div>
<div class="pink">-3DB</div>
<div class="pink">Décro HS</div>
</div>
<div class="row">
<div class="gold">-</div>
<div class="gold">8</div>
<div class="gold">3</div>
</div>
<div class="row">
<div class="gold">-</div>
<div class="gold">5</div>
<div class="gold">4</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="pink">Alarme RX</div>
<div class="pink">Alarme RX</div>
<div class="pink">GE</div>
</div>
<div class="row">
<div class="gold">7</div>
<div class="gold">1</div>
<div class="gold">6</div>
</div>
<div class="row">
<div class="gold">8</div>
<div class="gold">0</div>
<div class="gold">2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--/container-->
CSS
.pink {
display: inline-block;
width:6rem;
background:pink;
}
.gold {
display: inline-block;
width:6rem;
background:gold;
}
.aqua {
width:6rem;
display: inline-block;
background:aqua;
}
.red {
background-color: red;
color: #fff;
width: 18.5rem;
}
.double-red {
background-color: red;
color: #fff;
width: 37.25rem;
}
.container {
width: 18.5rem;
overflow: auto;
}
.row {
display: block;
}
.side-by-side {
display: inline-block;
}
.no-wrap {
width: 37.25rem;
white-space: nowrap;
}
此处为 CodePen:https://codepen.io/vogelbeere/pen/awxQMW
关于html - 没有表格标签的表格结构,只有div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45141002/