html 右边框变短,HTML / CSS：使边框右侧高度动态化

3 个答案:

答案 0 :(得分：0)

＆＃13;

＆＃13;

#ColumnOne,

#ColumnTwo,

#ColumnThree,

#ColumnFour {

border-right: 1px solid;

display: table-cell;

vertical-align: top;

}＆＃13;

SAMPLE TITLE

111 111

222

333 333 333 333

444 444 444 444 444 444 444

＆＃13;＆＃13;＆＃13;

答案 1 :(得分：0)

您可以使用jQuery height方法获取每列的高度，将它们放入数组中，然后使用JavaScript Math.max函数计算最大高度：

＆＃13;

＆＃13;

$(function() {

var arr = [

$("#ColumnOne").height(),

$("#ColumnTwo").height(),

$("#ColumnThree").height(),

$("#ColumnFour").height()

];

$("#ColumnOne, #ColumnTwo, #ColumnThree, #ColumnFour").height(Math.max.apply(Math, arr));

});＆＃13;

#ColumnOne,

#ColumnTwo,

#ColumnThree,

#ColumnFour {

float: left;

border-right: 1px solid;

}＆＃13;

111 111

222

333 333 333 333

444 444 444 444 444 444 444

＆＃13;＆＃13;＆＃13;

答案 2 :(得分：0)

Flexbox可以做到这一点

#ColumnOne,

#ColumnTwo,

#ColumnThree,

#ColumnFour {

border-right: 1px solid;

float: left;

}

#MAIN {

display: flex;

}

SAMPLE TITLE

111 111

222

333 333 333 333

444 444 444 444 444 444 444

总结

以上是生活随笔为你收集整理的html 右边框变短,HTML / CSS：使边框右侧高度动态化的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。