0

在此示例中，是否可以自动调整<span class="orange">ORANGE</span>以设置最大行高？并有两个或更多 <span>的将可以拆分单元格来调整高度？

（现在使用：display: table, table-row, table-cell，也可以使用经典表格）

在此处输入图像描述

http://jsfiddle.net/EjqL8/

<html>
<head>
<style>
.table {
  display: table;
  background: #eee;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}

.cell span {
    display: block;
}

.cell span.red {
    background: red;
}
.cell span.yellow {
    background: yellow;
}
.cell span.green {
    background: green;
}
.cell span.orange {
    background: orange;
}
.cell span.grey {
    background: grey;
}

</style>
</head>
<body>
<div class="table">
    <div class="row">
        <div class="cell">Header</div>
        <div class="cell">Header</div>
        <div class="cell">Header</div>
        <div class="cell">Header</div>
    </div>
    <div class="row">
        <div class="cell">Row 1</div>
        <div class="cell">Row 1</div>
        <div class="cell">Row 1</div>
        <div class="cell">Row 1</div>
    </div>
    <div class="row">
        <div class="cell">
            <span class="red">RED</span>
            <span class="yellow">YELLOW</span>
            <span class="green">GREEN</span>
            <span class="orange">ORANGE</span>
            <span class="grey">GREY</span>
        </div>
        <div class="cell">Row 2</div>
        <div class="cell">Row 2</div>
        <div class="cell">
            <span class="orange">ORANGE</span>
        </div>
    </div>
 <div class="row">
        <div class="cell">
            <span class="red">RED</span>
            <span class="yellow">YELLOW</span>
            <span class="green">GREEN</span>
            <span class="orange">ORANGE</span>
            <span class="grey">GREY</span>
        </div>
        <div class="cell">Row 2</div>
        <div class="cell">Row 2</div>
        <div class="cell">
            <span class="green">GREEN</span>
            <span class="orange">ORANGE</span>
        </div>
    </div>  
</div>
</body>
</html>
4

5 回答 5

1

http://jsfiddle.net/EjqL8/2/

$(".row .cell:last-child").has("span").each(function(){
    var counter = 0;
    $(this).find("span").each(function(){
        counter += 1;
    });

    var height = 100 / counter;

    $(this).find("span").css('height', height+'%');        
});

但是你至少需要为你的细胞设置高度。这样 jQuery 将计算跨度的高度。我们还可以计算您的通话高度并设置它们以完成这项工作。

于 2013-11-15T11:05:59.723 回答
1

Using jQuery you can do it. You just have to use : 

$('.toExpand').each(function(){
    var parentHeight = $(this).parent().height();
    $(this).height(parentHeight);    
});

to expand it to the full height of parent. Then divide the parentHeight variable to adjust it.

Here is the code: http://jsfiddle.net/QtBlueWaffle/EjqL8/5/

于 2013-11-15T11:55:28.437 回答
1

试试这个：http: //jsfiddle.net/EjqL8/4/

$(document).ready(function(){
    $(".row .cell:last-child").has("span").each(function(){
        var counter = $(this).find("span").length;
        var height = $(this).height() / counter;                
        $(this).find("span").css('height', height+'px');        
    });
});
于 2013-11-15T11:53:26.550 回答
0

我使用 table 标签创建了一个FIDDLE 。

您可以只使用rowspan=nor colspan=n(n=number of columns) 来合并列。

于 2013-11-15T11:04:30.523 回答
0

好吧，我不想显得粗鲁，但您主要是在这里重新发明轮子。

您将要尝试使用 div 高度百分比。但是，在您定义父级的高度之前，这将不起作用。你最终可能会缩小到一个起始高度，但这似乎是一种可怕的方式。

于 2013-11-15T11:09:57.980 回答