Html 不带表标记的表结构,仅DIV
我有一个只剩下div和float的表结构。我希望它能够响应(我知道我必须添加媒体查询)。我的代码有问题。现在,我想减少窗口,它改变为水平滚动,我尝试了,但它不工作。 这是我的密码:Html 不带表标记的表结构,仅DIV,html,css,css-float,css-tables,Html,Css,Css Float,Css Tables,我有一个只剩下div和float的表结构。我希望它能够响应(我知道我必须添加媒体查询)。我的代码有问题。现在,我想减少窗口,它改变为水平滚动,我尝试了,但它不工作。 这是我的密码: 调频 TNT 惊慌 批判 无支持 非名义 (图表) 2. 5. (图表) 10 1. 票 非名义 水车 克洛斯 5. - 2. 9 - 0 地点 珀特高频 -3DB 德克罗酒店 警报接收 警报接收 通用电气 - 8. 3. 7. 1. 6. - 5. 4. 8. 0 2. 步骤1。从divs中删除所有样式 步骤
调频
TNT
惊慌
批判
无支持
非名义
(图表)
2.
5.
(图表)
10
1.
票
非名义
水车
克洛斯
5.
-
2.
9
-
0
地点
珀特高频
-3DB
德克罗酒店
警报接收
警报接收
通用电气
-
8.
3.
7.
1.
6.
-
5.
4.
8.
0
2.
步骤1。从div
s中删除所有样式
步骤2使用内联块而不是浮点
步骤3使用display:block
将每个表行括在自己的div
中,但要并排的表行除外,它们应该是inline block
步骤4向父div添加宽度,并溢出-x:auto代码>
第5步在要并排放置的两个部分周围添加一个非换行父div,并将每个部分放在自己的div中
(如果您只想在sites部分进行滚动,请将其放入带有类的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-->
CodePen here:在innder div tagI中使用%宽度,我不太确定您想用FM和TNT表格单元格做什么,所以我把它们放在顶部,但是你可以使用我在回答中使用的相同方法谢谢,但这不是我想要的…我希望它像以前一样占据100%的容器,当我缩小窗口时,它仍然在同一条线上,有一个卷轴…我添加了一个显示结构的图像…好的,我现在已经更改它以匹配你的草图(看看代码笔)谢谢..卷轴按我所希望的那样工作,如果可以的话,这只是另一个问题…我希望在我更改子标题的大小或向一个标题添加另一个值时,作为父标题的标题宽度都会更改。。。如果你明白我的意思?不知道你的意思?如果您的意思是希望使容器div适合屏幕,则使用百分比宽度或vw宽度(视口宽度)
.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;
}