css让div一个左一个右,第一个div总是在左边，右边剩下的 - 用CSS

你必须使用绝对定位。

.wrap {

position: relative;

}

.box {

width: 45%;

background-color: green;

border: 1px solid red;

/* float: left; */

}

.fixd {

position: absolute;

left: 50%;

top: 0;

bottom: 50%;

}

.fixd + .fixd {

top: 50%;

bottom: 0;

}

重要的是为父元素定义属性position: relative;。第一个元素定义父级的高度。第二和第三个元素完全位于父代之内。您可以通过top和bottom属性定义元素的高度。

如果右侧元素的数量不固定，则必须通过JavaScript计算大小。

最简单的JavaScript应该是这样的：

$('.fixd').css('height', $('.fixd').parent().innerHeight()/$('.fixd').size());

在真正的应用程序，你必须做一些修正(补白，边距，边框)。然后脚本为您小提琴应该是这样的

var height = $('.fixd').parent().innerHeight(),

count = $('.fixd').size(),

boxSize = 0;

// Correction of borders and margin-top size

height = height - count * 2 - (count-1) * 10;

boxSize = Math.floor(height/count);

// set computed size

$('.fixd').css('height', boxSize)

.first().css('margin-top', 0);

// fix last element (it is because of rounding floating numbers)

$('.fixd').last().css('height', height-(count-1)*boxSize);

完全小提琴是here