如何在另外两个中间创建一个div来跨越多行，如表中的rowspan

我一直试图避免使用表格来布置元素，因为我意识到它们不是为了那个而像div，p和CSS这样的普通容器元素足以实现任何可能需要的布局。到目前为止，我已经取得了成功，但有一种情况我自己似乎并没有克服。我基本上需要的是具有以下标记的桌子：如何在另外两个中间创建一个div来跨越多行，如表中的rowspan

<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>

但我不想使用表格。此图片会给你什么，我需要更好的主意： The layout

我用左浮动，给中间的div四个相邻的div的总高度，但这次的div的第二行试图从开始中间div的底线。

来源

2014-09-26 Mikayil Abdullayev

你是否已经意识到像引导，基础，纯等CSS框架...并试图了解它如何在引擎盖下工作？因为所有CSS框架都有的网格框架非常简单，并且他们的“入门指南”会引导您了解所描述的情况。 – 2014-09-26 06:20:57

最重要的是，在使用div时没有“行跨”概念。这是一个'表'唯一的事情。你基本上玩'高度'CSS属性。 – 2014-09-26 06:26:09

为了演示这些变化，我在div上使用了border-color，代码非常简单明了。

在高度下面的例子已被固定到400像素

<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>

来源

2014-09-26 06:21:48 sanjeev

我吨RY使用显示：在外的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> 

<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>

没有浮:)

来源

2014-09-26 06:21:51

如何在另外两个中间创建一个div来跨越多行，如表中的rowspan

回答

相关问题