用CSS平等分發高度

我有一個非常棘手的HTML問題，我不確定是否有基於CSS的解決方案。基本上我有一個三列網格。第一列和第三列可以包含可變數量的行。第二列總是隻有一行。每一行都有一個最小高度。用CSS平等分發高度

所以具有最多行的列將具有所有高度設置爲最小高度的行。其他列中的行應該同樣高度展開以佔據剩餘空間。

說第一列有三行，每行高50px。第二列必須有一行150px高。如果第三列有兩行，它們必須都是75px高。下面是一些圖片，以進一步說明我在做什麼。

這甚至可能與CSS？

enter image description here

來源

2013-03-01 d512

您可以通過使用一個標準的「CSS等高列」可能做的解決方案，然後再加入50/50和33/33/33格在這些列進一步細分。 – 2013-03-01 18:23:34

@MarcB不，他不能這樣做，因爲他在div中的行數不確定。他不能事先分割高度嗎？這看起來像需要JavaScript。 – 2013-03-01 18:25:51

@sven：足夠了，但是js會動態地在css中設置height = totalheight /＃行。等列包裝器仍然保存着 – 2013-03-01 18:27:29

每建議由少數幾個人，我結束了使用一些簡單的JavaScript來完成這件事：

$(document).ready(function() { 
    var c1Rows = $(".col1 .row").length; 
    var c3Rows = $(".col3 .row").length; 

    var minHeight = 50; 
    var max = Math.max(c1Rows, c3Rows); 
    var totalHeight = max * minHeight; 

    $(".col1 .row").css("height", totalHeight/c1Rows); 
    $(".col2 .row").css("height", totalHeight); 
    $(".col3 .row").css("height", totalHeight/c3Rows); 
});

來源

2013-03-04 17:37:29 d512

你基本上要捏造事實。你需要確定三列有包裝 - 並且整個事物都有一個包裝。然後，您可以執行類似CSS Faux columns的操作，以使第二列顯示爲與另外兩列一樣高。

來源

2013-03-01 18:25:40 chipcullen

這並不能解決他的問題，因爲內容不會被調整。正如你所說的虛擬列只能僞造每個背景的高度。主要問題是找出每一行的高度。 – 2013-03-01 18:28:50

的確，我當時想要採取'詭計'的方法，但我並沒有真正掌握OP的成果。要真正做到這一點，OP將不得不依靠JS來進行這樣的計算。所以，不，這對於vanilla CSS來說是不可能的。 – chipcullen 2013-03-01 18:30:56

如果你不介意只在少量的瀏覽器中工作，那麼你完全可以用純CSS來做到這一點。來吧，添加和你想刪除儘可能多的孫子的div：

http://codepen.io/cimmanon/pen/ldmtJ

/* line 5, ../sass/test.scss */ 
.wrapper { 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
} 
@supports (display: flex) and (flex-wrap: wrap) { 
    /* line 5, ../sass/test.scss */ 
    .wrapper { 
    display: flex; 
    } 
} 

/* line 9, ../sass/test.scss */ 
.a, .b, .c { 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-flow: row wrap; 
    -ms-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 
@supports (display: flex) and (flex-wrap: wrap) { 
    /* line 9, ../sass/test.scss */ 
    .a, .b, .c { 
    display: flex; 
    } 
} 
/* line 13, ../sass/test.scss */ 
.a div, .b div, .c div { 
    border: 1px solid; 
    -webkit-flex: 1 0 100%; 
    -ms-flex: 1 0 100%; 
    flex: 1 0 100%; 
} 

/* Fancy it up! */ 
/* line 21, ../sass/test.scss */ 
.a { 
    background: #ff9999; 
    -webkit-flex: 1 1 10em; 
    -ms-flex: 1 1 10em; 
    flex: 1 1 10em; 
} 

/* line 26, ../sass/test.scss */ 
.b { 
    background: #00e600; 
    -webkit-flex: 1 1 10em; 
    -ms-flex: 1 1 10em; 
    flex: 1 1 10em; 
} 

/* line 31, ../sass/test.scss */ 
.c { 
    background: #9999ff; 
    -webkit-flex: 1 1 40%; 
    -ms-flex: 1 1 40%; 
    flex: 1 1 40%; 
} 

<div class="wrapper"> 
    <div class="a"> 
    <div>a</div> 
    <div>a</div> 
    <div>a</div> 
    <div>a</div> 
    <div>a</div> 
    </div> 

    <div class="b"> 
    <div>b</div> 
    </div> 

    <div class="c"> 
    <div>c</div> 
    <div>c</div> 
    </div> 
</div>

瀏覽器支持：歌劇，鉻，IE10。當Firefox終於完成支持目前的Flexbox草案，包括 flex-wrap，那麼它也將在那裏工作。

來源

2013-03-01 18:58:11 cimmanon

即使我沒有使用此解決方案，但仍需要一個準確的答案。 – d512 2013-03-01 19:10:20

用CSS平等分發高度

回答

相關問題