Entwerfen Box-Muster mit HTML & CSS

Question

Ich versuche für ein Muster mit HTML & CSS wie im folgenden Screenshot gezeigt, kann ich diese Anforderung bis this erreichen. Gibt es eine Möglichkeit, Elemente wie im Screenshot in roten Linien dargestellt anzupassen?

.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

Für eine schnelle Lösung, könnten Sie fügen Sie einfach einige 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>

Um jedoch einen Platz zwischen line3 und line4 zu geben, müssen Sie wahrscheinlich mehr Spalten hinzufügen.

Aber ich glaube, das ist keine gute Praxis, das ist zu kompliziert, ohne Grund, könnten Sie dies mit weniger Elemente und ein wenig mehr CSS, oder mit einer js-Bibliothek und Leinwand in kürzester Zeit tun.