将h4标签与叠加色上的按钮对齐
我正在使用Boostrap3。我在最终设计中遇到一些问题，该最终设计应如下图所示（请注意，蓝线只是为了说明文本应与按钮对齐）：
我以“高服务水平和质量”为标题制作了横幅，效果很好。但是我无法弄清楚如何在“预订会议并寻找解决方案”子行中进行设置。
这是我到目前为止所做的：
当我在子行中设置时，深色的叠加区域变得越来越高，这导致字母之间的填充变大，并且文本与按钮不对齐。
我的问题是，如何使标题和子行对齐，如上图所示？
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.flexbox-column {
display: flex;
flex-direction:column; /*Stack flex items verically*/
}
.flexbox-column .cta {
margin-top: auto !important; /*Send button to bottom*/
margin-bottom: 10px;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 400px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .cta {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .cta:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Button Position */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
}
@media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
@media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
/* Grid with different placement of position buttons */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
.btn-default {
background-color:transparent;
border:1px solid black;
}<div class="container">
<!-- Full width Banner -->
<div class="row">
<div class="col-sm-12 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://s-media-cache-ak0.pinimg.com/originals/87/bf/cf/87bfcfb36780c0fec472d8d301be7a1c.jpg"></img>
<div class="card-content">
<h4>HIGH SERVICELEVEL AND QUALITY</h4>
<a href="#" class="cta">Læs Mere</a>
</div>
</div>
</div>
</div>
</div>
</div>
3 个答案:
答案 0 :(得分：1)
在标题和说明周围加上包装纸，然后使用flexbox对齐项目，例如
body {
background-color: #f5f5f5;
}
.flexbox-column {
display: flex;
flex-direction:column; /*Stack flex items verically*/
}
.flexbox-column .cta {
margin-top: auto !important; /*Send button to bottom*/
margin-bottom: 10px;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 400px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .cta {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 0px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .cta:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Button Position */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
.card-content {
display: flex;
padding: 30px 0px;
justify-content: space-between;
align-items: flex-end;
}
.card-content__info {
display: flex;
flex-direction: column;
left: 3em;
position: relative;
/* text-transform: uppercase; */
}
.card-content__info > h4 {
padding: 0 !important;
margin: 5px 0 !important;
}
/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
.index-content .cta {
width: 100px;
padding: 12px 0px;
margin: 25px 0 0 0;
}
.card-content__info {
flex-direction: column;
left: 0;
}
.card-content {
flex-direction: column;
left: 40px;
position: relative;
align-items: inherit;
}
}
@media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
@media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p,
.card-content span {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
/* Grid with different placement of position buttons */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
.btn-default {
background-color:transparent;
border:1px solid black;
}<div class="container">
<!-- Full width Banner -->
<div class="row">
<div class="col-sm-12 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://s-media-cache-ak0.pinimg.com/originals/87/bf/cf/87bfcfb36780c0fec472d8d301be7a1c.jpg"></img>
<div class="card-content">
<div class="card-content__info">
<h4>HIGH SERVICELEVEL AND QUALITY</h4>
<span>Book a meeting and let's find a solution</span>
</div>
<a href="#" class="cta">Læs Mere</a>
</div>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
您可以将按钮置于不同的div中，与“ card” div处于同一级别。将“ float-left”类应用于卡片div，将“ float-right”类别应用于新的div。
此外，您显示：inline-block;如果需要，不确定上面提到的类是否默认包含它。
完成此操作后，您可以检查h4的行高并将其设置为1，然后根据设计调整其余内容。
答案 2 :(得分：0)
媒体查询中的width：100％即将到来，只需将width：100％更改为width：auto即可。 CSS代码如下
另一个解决方案是
您可以将标题div包裹在一个div中，让它们向左浮动，对于按钮，向右浮动，在外部div中，给clearfix类 对于第一个解决方案，css是
@media (min-width: 768px)
.card-content h4, .card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
<div class="card-content clearfix">
<div style="float:left">
<h4>HIGH SERVICELEVEL AND QUALITY</h4>
<h4>BOOK A MEETING AND LETS FIND A SOLUTION</h4>
</div>
<a href="#" class="cta" style="float:right">Læs Mere</a>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？