使用HTML＆amp; amp;设计框模式CSS
我尝试使用HTML＆amp; amp; CSS如下面的屏幕截图所示，我能够达到this范围内的此要求。有没有办法调整元素，如屏幕截图中的红线所示。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.bracketbox1,.bracketbox2,.bracketbox3,.bracketbox4,.bracketbox5,.bracketbox6{
vertical-align:middle;
}
.bracketbox1 img{
width:80px;
height:80px;
}
.bracketbox2 img{
width:85px;
height:85px;
}
.bracketbox3 img{
width:95px;
height:95px;
}
.bracketbox4 img{
width:105px;
height:105px;
}
.bracketbox5 img{
width:120px;
height:120px;
}
.bracketbox5 img{
width:140px;
height:140px;
}
.bracketbox6 img{
width:160px;
height:160px;
}
.bordertop{
border-top:1px solid #ccc;
}
.borderright{
border-right:1px solid #ccc;
}
.borderleft{
border-left:1px solid #ccc;
}
.borderbottom{
border-bottom:1px solid #ccc;
}
.margin5{
margin:5px !important;
}
.margin10{
margin:10px !important;
}
.margin15{
margin:15px !important;
}
.margin20{
margin:20px !important;
}
.tg {border:0px solid #fff;border-collapse:collapse;border-spacing:0;width:100% !important;}
.tg td{padding:5px;word-break:normal;}
.tg th{padding:5px;word-break:normal;}
.tg td{font-size:10px;}
.tg hr{border-top: 1px solid #ccc;}
div.bracket-empty-box {
width: 80px;
height: 80px;
border: 2px solid #888;
}
.mt-10 {
margin-top: 20px;
} <div style="width: 320px;">
<div style="display: block;">
<div class="clearfix"></div>
<table border="0" data-comboid="1" class="tg mt-10">
<tbody>
<tr>
<td class="tg-yw4l"><hr style="width:15px"></td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l bordertop borderright"></td>
<td class="tg-yw4l borderbottom"></td>
<td rowspan="4" class="tg-yw4l">
<div class="bracketbox2">
<div class="bracket-empty-box"></div>
</div>
</td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l"><hr style="width:15px"></td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l borderbottom borderright"></td>
<td class="tg-yw4l bordertop"></td>
<td class="tg-yw4l bordertop borderright"></td>
<td class="tg-yw4l borderbottom"></td>
</tr>
</tbody>
</table>
<table border="0" data-comboid="2" class="tg mt-10">
<tbody>
<tr>
<td class="tg-yw4l"><hr style="width:15px"></td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l bordertop borderright"></td>
<td class="tg-yw4l borderbottom"></td>
<td rowspan="4" class="tg-yw4l">
<div class="bracketbox2">
<div class="bracket-empty-box"></div>
</div>
</td>
<td rowspan="2" class="tg-yw4l borderbottom borderright"></td>
<td class="tg-yw4l bordertop"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l"><hr style="width:15px"></td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l borderbottom borderright"></td>
<td class="tg-yw4l bordertop"></td>
</tr>
</tbody>
</table>
<table border="0" data-comboid="3" class="tg mt-10">
<tbody>
<tr>
<td class="tg-yw4l"><hr style="width:15px"></td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l bordertop borderright"></td>
<td class="tg-yw4l borderbottom"></td>
<td rowspan="4" class="tg-yw4l">
<div class="bracketbox2">
<div class="bracket-empty-box"></div>
</div>
</td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l"><hr style="width:15px"></td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l borderbottom borderright"></td>
<td class="tg-yw4l bordertop"></td>
<td class="tg-yw4l bordertop borderright"></td>
<td class="tg-yw4l borderbottom"></td>
</tr>
</tbody>
</table>
<table border="0" data-comboid="4" class="tg mt-10">
<tbody>
<tr>
<td class="tg-yw4l"><hr style="width:15px"></td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l bordertop borderright"></td>
<td class="tg-yw4l borderbottom"></td>
<td rowspan="4" class="tg-yw4l">
<div class="bracketbox2">
<div class="bracket-empty-box"></div>
</div>
</td>
<td rowspan="2" class="tg-yw4l borderbottom borderright"></td>
<td class="tg-yw4l bordertop"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l"><hr style="width:15px"></td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l borderbottom borderright"></td>
<td class="tg-yw4l bordertop"></td>
</tr>
</tbody>
</table>
<div class="margin5 clearfix"></div>
</div>
</div>
1 个答案:
答案 0 :(得分：0)
要获得快速解决方案，您只需添加一些colspan：
.bracketbox1,
.bracketbox2,
.bracketbox3,
.bracketbox4,
.bracketbox5,
.bracketbox6 {
vertical-align: middle;
}
.bracketbox1 img {
width: 80px;
height: 80px;
}
.bracketbox2 img {
width: 85px;
height: 85px;
}
.bracketbox3 img {
width: 95px;
height: 95px;
}
.bracketbox4 img {
width: 105px;
height: 105px;
}
.bracketbox5 img {
width: 120px;
height: 120px;
}
.bracketbox5 img {
width: 140px;
height: 140px;
}
.bracketbox6 img {
width: 160px;
height: 160px;
}
.bordertop {
border-top: 1px solid #ccc;
}
.borderright {
border-right: 1px solid #ccc;
}
.borderleft {
border-left: 1px solid #ccc;
}
.borderbottom {
border-bottom: 1px solid #ccc;
}
.margin5 {
margin: 5px !important;
}
.margin10 {
margin: 10px !important;
}
.margin15 {
margin: 15px !important;
}
.margin20 {
margin: 20px !important;
}
.tg {
border: 0px solid #fff;
border-collapse: collapse;
border-spacing: 0;
width: 100% !important;
}
.tg td {
padding: 5px;
word-break: normal;
}
.tg th {
padding: 5px;
word-break: normal;
}
.tg td {
font-size: 10px;
}
.tg hr {
border-top: 1px solid #ccc;
}
div.bracket-empty-box {
width: 80px;
height: 80px;
border: 2px solid #888;
}
.mt-10 {
margin-top: 20px;
}<div style="width: 320px;">
<div style="display: block;">
<div class="clearfix"></div>
<table border="0" data-comboid="1" class="tg mt-10">
<tbody>
<tr>
<td rowspan="2" class="tg-yw4l">
<hr style="width:15px">
</td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td rowspan="2" class="tg-yw4l bordertop borderright"></td>
<td rowspan="2" class="tg-yw4l borderbottom"></td>
<td rowspan="4" class="tg-yw4l">
<div class="bracketbox2">
<div class="bracket-empty-box"></div>
</div>
</td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">
<hr style="width:15px">
</td>
<td rowspan="2" class="tg-yw4l">
<div class="bracketbox1">
<div class="bracket-empty-box"></div>
</div>
</td>
<td class="tg-yw4l borderbottom borderright"></td>
<td class="tg-yw4l bordertop"></td>
<td class="tg-yw4l bordertop borderright"></td>
<td class="tg-yw4l borderbottom"></td>
</tr>
</tbody>
</table>
</div>
</div>
但要在line3和line4之间留出空格，您可能需要添加更多列。
但是我相信这不是一个好习惯，这是无缘无故的过于复杂，你可以用更少的元素和更多的css，或者用js库和画布来做到这一点。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？