我需要用Bulma css创建两个相同高度和宽度的列。所以我使用column is-6来实现相同的宽度，并尝试使用is-flex来实现相同的高度。但是当我添加is-flex时，高度是相同的，但忽略了is-6规则。所以我尝试将简单的宽度100%添加到 Package 器div中。然后我丢失了is-flex添加的相同高度。
这是JSFiddle example。
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jQquery sortable lists example</title>
<!-- Bulma css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>-->
<style>
body, html {
height: 100%;
xoverflow: hidden;
padding: 0!important;
}
body {
background-color: #e9ecef;
}
.view-wrapper {
}
.nav {
height: 50px;
margin-bottom: 50px;
background-color: #42b983;
}
#visualCards .column {
height: 100%;
display: flex;
}
.visualCard {
width: 100%;
background-color: white;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="container">
<div id="visualCards" class="columns">
<div class="column is-6">
<div class="columns visualCard">
<div class="column is-3">
aaaa aaa aaaa aaa aaa aaa aaaa aaaa
</div>
<div class="column is-8">
bbbbb bbb bbbb bbbb bbb bbb bbb bbb
</div>
</div>
</div>
<div class="column is-6">
<div class="columns visualCard">
<div class="column is-3 is-flex">
aaaa aa aaaaaa
</div>
<div class="column is-8 is-flex">
bbbb bb bbbbb bb
</div>
</div>
</div>
</div>
</div>
</body>
</html>如果你删除. visualCard width：100%，你会得到相同的高度。我迷失在它。感谢任何帮助。
2条答案
按热度按时间dgiusagp1#
使用平铺是一个选项：
vmdwslir2#
我用下面的CSS规则解决了这个问题，这样我就可以使用类
.is-equal-height来对齐列。