如何在另外两个中间创建一个 div 以跨越多行，例如表中的行跨度答案

【问题标题】：How to make a div in the middle of two others to span multiple rows, like rowspan in tables如何在另外两个中间创建一个 div 以跨越多行，例如表中的行跨度
【发布时间】：2014-09-26 06:10:25
【问题描述】：

我已经有一段时间不使用表格来布局元素了，因为我意识到它们并不是为此而设计的，像 div、p 和 CSS 这样的普通容器元素足以实现任何布局需要。到目前为止，我一直很成功，但有一种情况我似乎无法靠自己克服。我基本上需要的是具有以下标记的表格可以做的事情：

<table>
  <tr>
    <td>Michael</td>
    <td rowspan="4"><img src="Photo.png"/></td>
    <td>Svenson</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Manson</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Sandgal</td>
  </tr>
  <tr>
    <td>Mirko</td>
    <td>Lahovic</td>
  </tr>
</table>

但我不想使用表。这张图片会让你更好地了解我需要什么：

我试过使用 float left 并给中间 div 四个相邻 div 的总高度，但这次第二行 div 从中间 div 的底线开始。

【问题讨论】：

您是否已经了解 CSS 框架（如 bootstrap、foundation、pure 等）并尝试了解其背后的工作原理？因为所有 CSS 框架都有的网格框架非常简单，而且他们的“入门”指南会带您了解您所描述的情况。
最重要的是，当您使用 div 时，没有“跨行”的概念。那是table 唯一的事情。你基本上是在玩height css 属性。

标签： html css html-table

【解决方案1】：

为了演示更改，我在 div 上使用了边框颜色，代码非常简单明了。

在下面的示例中，高度已固定为 400px

<html>
     <head>
      <style type="text/css">
        *, *:before, *:after {
            box-sizing: border-box;
        }
        .row{
         width  : 100%;
         border : 1px solid #ff0000;
         padding: 5px;
         float:left;
        }
        .cont{
         height :400px;
         border : 1px solid #00ff00;
         width:33%;
         padding:10px;
         float:left;
        }
        .small-row{
          height:25%;
          border: 1px solid #0000ff;
          width:100%;
          padding:2px;
          float:left;
        }

      </style>
     </head>
     <body>
       <div class="row">
         <div class="cont">
            <div class="small-row"></div>
            <div class="small-row"></div>
            <div class="small-row"></div>
            <div class="small-row"></div>
         </div>

         <div class="cont">
            <div class="large-row"></div>
         </div>

         <div class="cont">
            <div class="small-row"></div>
            <div class="small-row"></div>
            <div class="small-row"></div>
            <div class="small-row"></div>
         </div>
       </div>
     </body>
    </html>

【讨论】：

【解决方案2】：

我会尝试在外部 div 上使用 display:inline-block，如下所示：

<div style='display:inline-block;height:100px;'>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
</div>

<div style='display:inline-block;height:100px;'>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;height:100px;"></div>
</div>

<div style='display:inline-block;height:100px;'>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
</div>

不需要浮点数:)

【讨论】：