我使用flexbox格式化三个div,以便它们具有相同的高度(无论内容如何)。我试图在div底部的所有div中对齐按钮(所有垂直对齐),但我无法让它工作。我试图以任何我能想到的方式使用align-content和justify-content ... 这是“干净”的代码,我删除了所有我尝试对齐按钮的东西,只保留了工作代码。
.container .row {
@include flex;
@media screen and (max-width: $screen-sm) {
flex-direction: column;
}
}
<div class="container">
<div class="row row-bottom-padded">
<div class="block">
<div class="text">
<i class="icon {{ .icon }}"></i>
<h2>{{ .title }}</h2>
<p>{{ .description }}</p>
<p><a href="{{ .url }}" class="btn">{{ .button}}</a></p>
</div>
</div>
<div class="block">
<div class="text">
<i class="icon {{ .icon }}"></i>
<h2>{{ .title }}</h2>
<p>{{ .description }}</p>
<p><a href="{{ .url }}" class="btn">{{ .button}}</a></p>
</div>
</div>
<div class="block">
<div class="text">
<i class="icon {{ .icon }}"></i>
<h2>{{ .title }}</h2>
<p>{{ .description }}</p>
<p><a href="{{ .url }}" class="btn">{{ .button}}</a></p>
</div>
</div>
</div>
</div>
如何设置我的CSS以使三个按钮在所有div的底部对齐?我需要添加任何类型的容器吗?感谢。
答案 0 :(得分:1)
你需要嵌套flexboxes
.container .row {
display: flex;
}
.block {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid grey;
}
.text {
flex: 1;
/* expand to maximum height of parent */
display: flex;
flex-direction: column;
}
.text p:last-child {
margin-top: auto;
/* push to bottom */
text-align: center;
}
.btn {
padding: 1em;
background: lightblue;
}
<div class="container">
<div class="row row-bottom-padded">
<div class="block">
<div class="text">
<i class="icon">icon</i>
<h2>Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><a href="#" class="btn">Button</a></p>
</div>
</div>
<div class="block">
<div class="text">
<i class="icon">icon</i>
<h2>Title</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p><a href="#" class="btn">Button</a></p>
</div>
</div>
<div class="block">
<div class="text">
<i class="icon">icon</i>
<h2>Title</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
<p><a href="#" class="btn">Button</a></p>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
将你的按钮包装成一个带有类的div,然后像下面那样写css。
.container .row {
display: flex;
@media screen and (max-width: $screen-sm) {
flex-direction: column;
}
}
.btn-cont {
width: 100%;
display: flex;
justify-content: center;
}
<div class="container">
<div class="row row-bottom-padded">
<div class="block">
<div class="text">
<i class="icon {{ .icon }}"></i>
<h2>{{ .title }}</h2>
<p>{{ .description }}</p>
<div class="btn-cont"><p><a href="{{ .url }}" class="btn">{{ .button}}</a></p> </div>
</div>
</div>
</div>
</div>