特殊布局div正方形

时间:2015-11-04 19:38:01

标签: javascript html css css3 drop-down-menu

我想要一个我想用HTML制作的游戏。我只是不知道如何创建这个布局:

This is an approximate layout for my idea.

我怎样才能通过HTML,JavaScript和CSS实现这一目标? (不,我不是n00b。我只是不知道如何用小方块创建一个正方形。)非常感谢。附:我还是个孩子。 :)此外,抱歉视觉。我把它扔在一起两分钟。

2 个答案:

答案 0 :(得分:0)

您需要包含列和行的网格布局。这应该可以帮助您入门。

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;
}

答案 1 :(得分:0)

你甚至可以通过单一选择来做到这一点并从box-shadow中绘制线条:

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>