我需要创建一个比普通表困难的表

Question

我正在努力让左侧的长框出现在1-9框旁边。实际上，我对所有颜色和阴影阴影都没问题。我已经尝试了几个小时！

我以为CSS网格可能是答案，但是我的一些客户是IE11，有些是Edge。
这是我要实现的目标：

https://imgur.com/6kweieJ https://i.imgur.com/6kweieJ.png?1

希望您能提供帮助

到目前为止的解决方案

<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the 9 cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  color: white;
  }
  
/* Style the top left card */
.cardtopleft {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #10069f;
    }
</style>

<div class="allboxes"> 
   <div class="row">
      <div class="column">
         <div class="cardtopleft">
            <h3> 
               <span class="ms-rteThemeForeColor-1-0">​Box top left</span></h3>​ 
            <br/></div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #10069f;">
            <h3>Car​d 1<br/></h3> ​ 
            <br/></div> 
      </div> 
      <div class="column"> 
         <div class="card" style="background-color: #10069f;">
            <h3>Card 2<br/></h3>
            <br/>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #10069f;">
            <h3>Card 3<br/></h3>
            <br/>
         </div>
      </div>
   </div>
   <br/>
   <div class="row">
      <div class="column">
         <div class="card" style="background-color: #10069f;"> 
            <h3>Long box<br/></h3> 
            <p> 
               <br/>&#160;</p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;</p> 
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #007588;">
            <h3>Card 4<br/></h3>
            <p>Some text</p>
            <p>Some text</p>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #00bfbd;">
            <h3>Card 5<br/></h3>
            <p>Some text</p>
            <p>Some text</p>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #8be8df;">
            <h3>Card 6<br/></h3>
            <p>Some text</p>
            <p>Some text​​​<br/></p>
         </div>
      </div>
   </div>
   <br/>&#160;<br/>​ 
   <br/></div>

Answer 1

Flexbox。您基本上有2行。第二行具有嵌套的4列弹性框。将“框左上角”和“长框”固定为固定宽度，可能为96px左右。然后在内部框上使用flex: 0 1 auto，以便它们自动拉伸以填充剩余的空间。

有一个名为CSS Flexbox Please!的入门级游乐场

Answer 2

如果可以的话，我会使用CSS网格。您可以在无需大量嵌套html元素的情况下实现此布局。我猜这取决于这种设计是如何固定的。所以基本上我有一个外部网格，它使用2列，前100像素宽，其他占据可用空间的其余部分。内部网格用于框1-9，它们各自使用父容器中可用空间的1/3。 grid-gap属性使轻松地均匀分布空间，并且在计算宽度时不必考虑边距。

.grid {
  display:grid;
}
.grid.outer {
  grid-template-columns: 100px 1fr;
  grid-gap: 10px;
  background:#FFFFFF;
  width:100%;
}
.box {
  padding:20px;
  color:#FFFFFF;
  background-color: pink;
  border:1px solid #666666;
  display:flex;
  align-items:center;
  justify-content:center;
}
.grid.inner {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

<div class='grid outer'>
  <div class='box'>Header Left Box</div>
  <div class='box'>Header Box</div>
  <div class='box'>Long box</div>
  <div class='grid inner'>
    <div class='box'>Box1</div>
    <div class='box'>Box2</div>
    <div class='box'>Box3</div>
    <div class='box'>Box4</div>
    <div class='box'>Box5</div>
    <div class='box'>Box6</div>
    <div class='box'>Box7</div>
    <div class='box'>Box8</div>
    <div class='box'>Box9</div>
  </div>
</div>
  

Answer 3

这是使用display:flex

的解决方案

<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px; display: flex; flex-wrap: wrap;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the 9 cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  color: white;
  height: 100%;
    box-sizing: border-box;
  }
  
/* Style the top left card */
.cardtopleft {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #10069f;
    }
</style>

<div class="allboxes"> 
   <div class="row">
      <div class="column">
         <div class="cardtopleft">
            <h3> 
               <span class="ms-rteThemeForeColor-1-0">​Box top left</span></h3>​ 
            <br/></div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #10069f;">
            <h3>Car​d 1<br/></h3> ​ 
            <br/></div> 
      </div> 
      <div class="column"> 
         <div class="card" style="background-color: #10069f;">
            <h3>Card 2<br/></h3>
            <br/>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #10069f;">
            <h3>Card 3<br/></h3>
            <br/>
         </div>
      </div>
   </div>
   <br/>
   <div class="row">
      <div class="column">
         <div class="card" style="background-color: #10069f;"> 
            <h3>Long box<br/></h3> 
            <p> 
               <br/>&#160;</p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;</p> 
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #007588;">
            <h3>Card 4<br/></h3>
            <p>Some text</p>
            <p>Some text</p>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #00bfbd;">
            <h3>Card 5<br/></h3>
            <p>Some text</p>
            <p>Some text</p>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #8be8df;">
            <h3>Card 6<br/></h3>
            <p>Some text</p>
            <p>Some text​​​<br/></p>
         </div>
      </div>
   </div>
   <br/>&#160;<br/>​ 
   <br/></div>