Question

我想为网页创建一个有点复杂的布局。我将解释使用table-tags，但实际上（我认为）我想在div-tags中使用它。

我需要填充整个屏幕的结构 - 左半部分和右半部分（1-9和10-18）应该占据整个屏幕的一半。在每一半中，我希望上部和下部条形图具有一定数量的像素（50？），并且中间字段垂直地占据整个屏幕的其余部分。事实上，字段5和14将占据屏幕的大部分。

我已经成功地使用带有div position = absolute的css创建了这个布局，但是16个小字段的定位非常难看，乏味且很可能不是正确的方法。一旦我使用绝对定位，我就不能使用边距来保持小块之间的距离，但这很方便。

我使用display = block或inline-block找到了帖子，但是一旦设置了position = absolute，这些就不起作用了（至少我是这么认为）。我不能让他们在我的左右半屏幕内工作。没有绝对定位，我无法进行第一次分割，因此使用了整个可见宽度，但没有出现滚动条。

有办法吗？

<table border="0">
<tr>
<td>
<table border="1">
<tr><td>01</td><td>02</td><td>03</td><td>04</td></tr>
<tr><td colspan=4><br/>05<br/></td></tr>
<tr><td>06</td><td>07</td><td>08</td><td>09</td></tr>
</table>
</td>
<td>
<table border="1">
<tr><td>10</td><td>11</td><td>12</td><td>13</td></tr>
<tr><td colspan=4><br/>14<br/></td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</table>
</td>
</tr>
</table>

Answer 1

您可以使用display：flex属性 Flex将自行处理div的定位以及宽度/高度。此外，您可以轻松应用保证金/填充请找到代码段希望它有所帮助。

.parent {
  display: flex;
  flex-direction: row;
}
.col {
  display: flex;
  flex-direction: column;
}
.row1 {
  display: flex;
  flex-direction: row;
  height: 50px;
}
.row2 {
  padding: 10px;
}
.row3 {
  display: flex;
  flex-direction: row;
  height: 50px;
}
.content {
  margin: 5px;
  padding: 5px;
}
.row1, .row2, .row3, .content {
  border: 1px solid #000;
}

<div class = "parent">
  <div class = "col">
    <div class = "row1">
      <div class="content">1</div>
      <div class="content">2</div>
      <div class="content">3</div>
      <div class="content">4</div>
    </div>
    <div class = "row2">
      <div>5</div>
    </div>
    <div class = "row3">
      <div class="content">6</div>
      <div class="content">7</div>
      <div class="content">8</div>
      <div class="content">9</div> 
    </div>  
  </div>
  <div class = "col">
    <div class = "row1">
      <div class="content">10</div>
      <div class="content">11</div>
      <div class="content">12</div>
      <div class="content">13</div>
    </div>
    <div class = "row2">
      <div>14</div>
    </div>
    <div class = "row3">
      <div class="content">15</div>
      <div class="content">16</div>
      <div class="content">17</div>
      <div class="content">18</div> 
    </div>
  </div>
</div>

从绝对切换回静态？有关系吗？

1 个答案: