我已经有一段时间试图避免使用表格来布局元素了，因为我意识到它们并不是为此而设计的，并且像 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>
但我不想使用表格。这张图片会让你更好地了解我需要什么:
我尝试使用向左浮动，并为中间的 div 指定四个相邻 div 的总高度，但这次第二行 div 从中间 div 的底线开始。
最佳答案
为了演示更改，我在 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>
关于html - 如何使一个 div 位于另外两个 div 的中间以跨越多行，就像表中的 rowspan 一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26053130/