Question

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

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

enter image description here

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

Answer 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将计算你的跨度的高度。我们还可以计算您的通话高度并设置它们以使其工作。

Answer 2

试试这个： 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');        
    });
});

Answer 3

使用jQuery，你可以做到。你只需要使用：

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

将其扩展到父级的完整高度。然后除以parentHeight变量进行调整。

这是代码： http://jsfiddle.net/QtBlueWaffle/EjqL8/5/

Answer 4

我使用表格标记创建了FIDDLE。

您可以使用rowspan=n或colspan=n（n =列数）来合并列。

Answer 5

嗯，我不想看起来很粗鲁，但你在这里主要重新发明轮子。

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

调整表格单元格中一个或多个<span>的高度</span>

5 个答案: