我使用的是 Materialize CSS(接近 Bootstrap )，我有两列文本，两列的底部都有一个按钮。但是，由于两列的内容大小不同，因此按钮的高度不同。 (见图)
我可以使用边距将它们设置为直线，但我宁愿不这样做。
有人有其他解决方案吗？
它似乎对我不起作用，这是完整的代码。也许你可以找到我做错了什么。
body {
background-image: url("../images/bg.jpg");
background-repeat: repeat;
}
nav {
padding-left: 1em;
-webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}
/* label focus color */
.input-field input[type=password]:focus + label {
color: #ee6e73;
}
/* label underline focus color */
.input-field input[type=password]:focus {
border-bottom: 1px solid #ee6e73;
box-shadow: 0 1px 0 0 #ee6e73;
}
/* label focus color */
.input-field input[type=email]:focus + label {
color: #ee6e73;
}
/* label underline focus color */
.input-field input[type=email]:focus {
border-bottom: 1px solid #ee6e73;
box-shadow: 0 1px 0 0 #ee6e73;
}
.input-field button {
background-color: #666666;
}
.input-field button:hover {
background-color: #ee6e73;
}
.container {
width:100%;
}
.container .section {
background-color:#e2e2e2;
-webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
margin-top:1em;
width:100%;
padding:1em;
}
footer {
background-color: #222222;
width:100%;
position:fixed;
bottom:0;
left:0;
padding-top: 1em;
-webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}
footer h5 {
color: white;
text-shadow: 2px 2px #000000;
}
footer a {
color: gray;
}
footer a:hover {
color: #ee6e73;
}
.input-field {
margin-top: -1em;
}
.item {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-right-color: #222222;
}
.item:last {
border-right: none
}
.container .section h4 {
padding-left: 1em;
margin-bottom: 1em;
.container .section p {
margin-top: 1em;
}
.row {
display: flex;
}
.col {
display: flex;
flex-direction: column;
}
.last {
margin-top: auto;
}<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<style type="text/css" media="screen">@import "../includes/style.css";</style>
<title>Home</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="../" class="brand-logo">Home</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
</ul>
</div>
</nav>
<div class="container">
<div class="section">
<div class="row">
<div class=" col s6">
<h4>Welkom!</h4>
<p>Heeft u nog geen account? Dan kunt u hieronder uzelf registreren door op de knop "Aanmelden" te klikken. Deze knop stuurt u door naar een pagina waar u uw gegevens kan invullen. Deze gegevens worden nagekeken door een administrator waarna u een
activatiecode krijgt toegestuurd in uw mail. Deze code geeft u toegang tot de rest van het systeem!</p>
<div class="row last">
<div class="input-field s12">
<button class="btn waves-effect waves-light" type="submit" name="action">Aanmelden
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<div class="col s6">
<h4>Heb je al een account?</h4>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email" data-error="Foutief e-mailadres!">E-mail</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row last">
<div class="input-field s12">
<button class="btn waves-effect waves-light" type="submit" name="action">Inloggen
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="dropdown.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</body>
</html>最佳答案
首先，你需要让列的高度相等，flexbox 可以做到这一点。
然后您需要将按钮一直推到 div 的底部。我们可以再次使用 flexbox 来做到这一点，但是使用 flex-direction:column 使每一列成为一个 flex-container 并选择最后一个 .row div(它包含按钮)和给它 margin-top:auto。
.row {
display: flex;
}
.col {
display: flex;
flex-direction: column;
}
.last {
margin-top: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<div class="container">
<div class="section">
<div class="row">
<div class=" col s6">
<h4>Welkom!</h4>
<p>Heeft u nog geen account? Dan kunt u hieronder uzelf registreren door op de knop "Aanmelden" te klikken. Deze knop stuurt u door naar een pagina waar u uw gegevens kan invullen. Deze gegevens worden nagekeken door een administrator waarna u een
activatiecode krijgt toegestuurd in uw mail. Deze code geeft u toegang tot de rest van het systeem!</p>
<div class="row last">
<div class="input-field s12">
<button class="btn waves-effect waves-light" type="submit" name="action">Aanmelden
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<div class=" col s6">
<h4>Heb je al een account?</h4>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email" data-error="Foutief e-mailadres!">E-mail</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row last">
<div class="input-field s12">
<button class="btn waves-effect waves-light" type="submit" name="action">Inloggen
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</div>关于css - 使用 Materialise css 同步按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39955911/