Say*_*iss 2 html css twitter-bootstrap
码:
#left {
background-color: rgba(255,0,0,0.3);
}
#right {
background-color: rgba(0,255,0,0.3);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-xs-3" id="left">
<p>short</p>
</div>
<div class="col-xs-3" id="right">
<p>long</p><p>long</p><p>long</p><p>long</p><p>long</p>
</div>
</body>如您所见,左侧容器和右侧容器的高度不同.有人可以给我一些关于制作相同高度的建议吗？
通过简单地声明display: flex包装父级将起作用.这意味着您必须将列包装为新的<div>,例如:
<div class="row row-equal-height">
<div class="col-xs-3" id="left">
<p>short</p>
</div>
<div class="col-xs-3" id="right">
<p>long</p>
<p>long</p>
<p>long</p>
<p>long</p>
<p>long</p>
</div>
</div>
对于CSS,您可以这样做:
.row-equal-height {
display: flex;
}
但是,这意味着您将不得不依赖浏览器支持CSS3 flexbox规范.好消息是,凭借供应商前缀,它今天得到了令人惊讶的广泛支持(> 97%).
请参阅下面的概念验证:
#left {
background-color: red;
}
#right {
background-color: green;
}
.row-equal-height {
display: flex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row row-equal-height">
<div class="col-xs-3" id="left">
<p>short</p>
</div>
<div class="col-xs-3" id="right">
<p>long</p>
<p>long</p>
<p>long</p>
<p>long</p>
<p>long</p>
</div>
</div>
</body>display: table您应该将此视为最后的解决方案,因为众所周知,您不应该使用表格进行布局.但是,如果你想支持根本不支持flexbox的浏览器(提示IE9及以下),这可能是你唯一的出路:
#left {
background-color: red;
}
#right {
background-color: green;
}
.wrapper {
display: table;
border-collapse: collapse;
width: 50%;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
float: none;
width: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="row">
<div class="col-xs-3" id="left">
<p>short</p>
</div>
<div class="col-xs-3" id="right">
<p>long</p>
<p>long</p>
<p>long</p>
<p>long</p>
<p>long</p>
</div>
</div>
</div>
</body>