如何在另外两个中间创建一个div来跨越多行，比如表中的rowspan [英] How to make a div in the middle of two others to span multiple rows, like rowspan in tables
问题描述
有一段时间我试图远离使用表来布置元素，因为我意识到它们不是为了那个而且正常的容器元素如div，p和CSS足以实现任何布局需要。到目前为止我已经取得了成功，但有一种情况我自己似乎无法克服。我基本上需要的是具有以下标记的表格：
It's been a while I try to keep away from using tables for laying out elements, as I realized that they were not meant for that and that normal container elements like div,p along with CSS are enough to achieve any layout one can need. I've been successful so far but there's one situation that I don't seem to overcome on my own. What I basically need is something that a table with the following markup would do:
<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>
但我不想使用表格。这张图片可以让您更好地了解我的需求：
But I don't want to use table. This image will give you better idea of what I need:
我尝试使用float left并给出中间div四个相邻div的总高度，但这次div的第二行从中间div的底线开始。
I've tried using float left and giving the middle div the total height of the four adjacent divs, but this time the second line of divs begin from the bottom line of the middle div.
推荐答案
为了演示这些变化，我在div上使用了border-color，代码非常简单明了。
To demonstrate the changes , i have used border-color on the div, the code is pretty simple and clear.
在下面的示例中，高度已固定为400px
In the example below the height has been fixed to 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>
这篇关于如何在另外两个中间创建一个div来跨越多行，比如表中的rowspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
