▸ 要获得正确的方向字母和双向箭头布局,请使用带有表格值的 CSS 显示属性。对于表格行和单元格,使用 CSS 子选择器规则,而不是类选择器规则。
我用 div/row 类编写了 Html,但必须使用子选择器。如何更改并且不重写所有内容。老实说,甚至不知道如何。该表没有边框,行日期字母和图像带有箭头。我刚刚开始学习html/css/js。
这是我的 html
谢谢你
<div class="Heading">
<div class="Cell">
<p class="diagonal"><img src="dablearow.png";></p>
</div>
<div class="Cell">
<h2>E</h2>
</div>
<div class="Cell">
<p></p>
</div>
</div>
<div class="Row">
<div class="Cell">
<h2>S</h2>
</div>
<div class="Cell">
<p><img src="dablearow.png" ></p>
</div>
<div class="Cell">
<h2>N</h2>
</div>
</div>
<div class="Row">
<div class="Cell">
<p></p>
</div>
<div class="Cell">
<h2>W</h2>
</div>
<div class="Cell">
<p class="diagonal"><img src="dablearow.png"></p>
</div>
</div>
最佳答案
我想你想要这个
.table{
display: table;
}
.table > div{
display: table-row;
}
.table > div > div{
display: table-cell;
width: 100px;
}
<div class="table">
<div>
<div>
<p class="diagonal"><img src="dablearow.png";></p>
</div>
<div>
<h2>E</h2>
</div>
<div>
<p></p>
</div>
</div>
<div>
<div>
<h2>S</h2>
</div>
<div>
<p><img src="dablearow.png" ></p>
</div>
<div>
<h2>N</h2>
</div>
</div>
<div>
<div>
<p></p>
</div>
<div>
<h2>W</h2>
</div>
<div>
<p class="diagonal"><img src="dablearow.png"></p>
</div>
</div>
</div>
关于html - table/html 中的子选择器规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62035381/