特別佈局與正方形的div廣場

Question

我有一個我想用HTML製作的遊戲的想法。我只是不知道如何創建這樣的佈局：

我怎麼能使用HTML，JavaScript和CSS實現這一目標？ （不，我不是n00b，我只是不知道如何創建一個有小方格的廣場。）非常感謝。附：我是一個孩子。 :)另外，對視覺感到抱歉。我在兩分鐘內把它扔在一起。

Answer 1

你想要一個帶有列和行的網格佈局。這應該有助於你開始。

http://codepen.io/anon/pen/qOMNdo

HTML

<div class="board"> 
    <div class="row"> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="column connector"> 
     | 
    </div> 
    <div class="column connector"> 
     &nbsp; 
    </div> 
    <div class="column connector"> 
     &nbsp; 
    </div> 
    <div class="column connector"> 
     | 
    </div> 
    </div> 
    <div class="row"> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    <div class="column"> 
     &nbsp; 
    </div> 
    <div class="column"> 
     &nbsp; 
    </div> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="column connector"> 
     | 
    </div> 
    <div class="column connector"> 
     &nbsp; 
    </div> 
    <div class="column connector"> 
     &nbsp; 
    </div> 
    <div class="column connector"> 
     | 
    </div> 
    </div> 
    <div class="row"> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    <div class="column"> 
     &nbsp; 
    </div> 
    <div class="column"> 
     &nbsp; 
    </div> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="column connector"> 
     | 
    </div> 
    <div class="column connector"> 
     &nbsp; 
    </div> 
    <div class="column connector"> 
     &nbsp; 
    </div> 
    <div class="column connector"> 
     | 
    </div> 
    </div> 
    <div class="row"> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="box"> 
     <select> 
      <option>Select</option> 
      <option>Option 1</option> 
     </select> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.row { 
    clear: both; 
} 

.column { 
    float: left;width: 150px; 
} 

.column.connector { 
    text-align: center; 
} 

.box { 
    border: 1px solid black; 
    padding: 30px 0; 
    text-align: center; 
} 

Answer 2

你甚至可以做到這一點單選擇和箱陰影畫你的線條：

select { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 16px; 
 
    margin: 100px 60px; 
 
    box-shadow: 0 0 0 40px white, 0 -40px 0 40px white, 0 40px 0 40px white, 0 -40px 0 41px, 0 40px 0 41px, 0 0 0 41px; 
 
} 
 
form { 
 
    padding: 0; 
 
    margin: auto; 
 
    width: 900px; 
 
    box-shadow: inset 0 0 0 110px white, inset 0 0 0 111px black; 
 
} 
 
select:nth-child(5), 
 
select:nth-child(7) { 
 
    float: left; 
 
    margin-right: 200px; 
 
    clear: right; 
 
} 
 
select:nth-child(6), 
 
select:nth-child(8) { 
 
    float: right; 
 
    margin-left: 200px; 
 
}

<form> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 

 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
    <select> 
 
    <option>Select</option> 
 
    <option>Option 1</option> 
 
    </select> 
 
</form>

個

盒可以從一個單一的div包裹每一個選擇，並從一個僞元素在他們身後的線可以得出：你試過

form { 
 
     padding: 0; 
 
     margin: auto; 
 
     width: 900px; 
 
     background: white; 
 
    } 
 
    form, 
 
    p { 
 
     position: relative; 
 
    } 
 
    form:before { 
 
     content: ''; 
 
     border: 1px solid; 
 
     position: absolute; 
 
     top: 110px; 
 
     left: 110px; 
 
     right: 110px; 
 
     bottom: 110px; 
 
     z-index: 0; 
 
    } 
 
    p { 
 
     display: inline-block; 
 
     width: 100px; 
 
     line-height: 16px; 
 
     padding: 70px 30px; 
 
     margin: 30px; 
 
     border: 1px solid; 
 
     background: inherit; 
 
    } 
 
    p:nth-child(5), 
 
    p:nth-child(7) { 
 
     float: left; 
 
     margin-right: 200px; 
 
     clear: right; 
 
    } 
 
    p:nth-child(6), 
 
    p:nth-child(8) { 
 
     float: right; 
 
     margin-left: 200px; 
 
    } 
 
    select { 
 
     width: 100px;

<form> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <select> 
 
     <option>Select</option> 
 
     <option>Option 1</option> 
 
    </select> 
 
    </p> 
 
</form>