使用HTML＆CSS設計框模式

Question

我想要使用HTML & CSS的模式，如下面的屏幕截圖所示，我能夠達到此要求，範圍達到this。有沒有什麼辦法來調整元素，如截圖中的紅線所示。

.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>

Answer 1

對於一個快速的解決方案，你可以只添加一些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庫和canvas來做到這一點。