我刚刚进入 html 和 css 的世界,差不多 2 周我一直在制作这些框,但我想要红色部分是一个按钮,以删除它的属性(重量、行高等),这就是它的原因看起来是这样的,我希望它始终保持在正方形下方,只有在文本丰富时才在下方。我尝试使用底部 0,但它出错了,我不放 css,因为我猜它是错误的,但我放了 html。
谢谢。
<div class="hospital">
<div class="hospital-img">
<img src="img/huesitos.png">
</div>
<div class="hospital-description">
<ul>
<li>
<h2>Traumatologia</h2>
</li>
<li>
<p>Nos encargamos de las lesiones traumáticas de columna y extremidades que afectan a: Huesos: fracturas (fractura de femur, fractura de húmero, fractura de Colles), epifisiólisis, etc. </p>
</li>
</ul>
</div>
<div class="book">
<a href="#">Más Informacion</a>
</div>
</div>
CSS
.hotel {
border: 2px solid #FFF;
margin: 20px auto;
padding: 10px 0px 0px 0px;
width:25%;
border-radius:10px;
}
.hotel li{
display: inline-block;
}
.hotel-img {
text-align: center;
margin-top: 20px;
}
.hotel-description {
text-align: justify;
width: 90%;
}
.book {
bottom: 0;
width: 100%;
}
a {
bottom: 0;
background-color: #D7263D;
color: #FFF;
display: block;
font-family: 'Pontano Sans', sans-serif;
font-size: 16px;
padding: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
h1 {
color: #FFF;
font-size: 70px;
font-weight: 900;
margin: 0;
padding-top: 120px;
text-align: center;
text-transform: uppercase;
}
h2 {
color: #FFF;
margin: 0;
text-align: center;
}
h3 {
color: #D7263D;
font-size: 32px;
margin: 0;
position: relative;
text-align: left;
text-transform: uppercase;
}
p {
color: rgba(255, 255, 255, 0.75);
margin: 0;
text-align: left;
}
你需要的是使用它
position: relative
或者position: absolute
让它bottom: 0
工作,因为这个属性只适用于定位元素。您必须将属性赋予
position: relative
包含所有文本和按钮的 div,并position: absolute
使用bottom: 0
按钮定位按钮,同时考虑到包含它的 div。这样,无论您的文本占据哪一行,按钮都会始终显示在它们的末尾。
例子:
在css中修改这个类:
你发的跟图片不一样,希望对你有帮助