我正在尝试在屏幕的一部分上制作水平卡,到目前为止,一切看起来都与我想要的一样,除了图像仅部分显示在卡边框中(大约一半),并覆盖了下一张卡。我试图使它均匀地放在卡中。我附带了一张我的意思的照片,这是我正在使用的代码。如果您需要查看html,请告诉我。
编辑:我添加了html
.cardcontainer {
border: white solid 1px;
padding-left: 30px;
padding-bottom: 30px;
margin: 20px;
background-color: rgb(7, 16, 31);
}
.cardheading {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
position: relative;
}
.cardpara {
font-family: Arial, Helvetica, sans-serif;
color: rgb(117, 117, 117);
position: relative;
padding-bottom: 25px;
padding-right: 25px;
font-style: italic;
width: auto;
}
.cardimg {
width: 130px;
height: 130px;
float: right;
padding:0;
margin-right: 30px;
}
.learnmorebutton {
border: none;
color: white;
padding: 10px 15px;
text-align: center;
font-size: 16px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
cursor: pointer;
margin: 0 auto;
border-radius: 15px;
animation: fade 10s linear infinite alternate;
text-decoration: none;
}
html:
<div class="cardcontainer">
<h1 class="cardheading">placeholder<i class="location">placeholder</i></h1>
<p class="cardpara">placeholder</p>
<a class="learnmorebutton" href="#" target="_blank">Learn More</a>
<img class="cardimg" src="#">
</div>
您的问题的基本答案是,您需要通过将overflow
属性添加到父对象来清除图像上的浮点数。但是,.cardpara
中的内容将向下推图像。不确定这是否是您想要的。
如果要在<p>
中的内容旁边放置图像,并在其周围环绕文本,请在标记中移动<img>
标签之前 <p>
。
.cardcontainer {
border: white solid 1px;
padding-left: 30px;
padding-bottom: 30px;
margin: 20px;
background-color: rgb(7, 16, 31);
overflow: auto;
}
.cardheading {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
position: relative;
}
.cardpara {
font-family: Arial, Helvetica, sans-serif;
color: rgb(117, 117, 117);
position: relative;
padding-bottom: 25px;
padding-right: 25px;
font-style: italic;
width: auto;
}
.cardimg {
width: 130px;
height: 130px;
float: right;
padding:0;
margin-right: 30px;
}
.learnmorebutton {
border: none;
color: white;
padding: 10px 15px;
text-align: center;
font-size: 16px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
cursor: pointer;
margin: 0 auto;
border-radius: 15px;
animation: fade 10s linear infinite alternate;
text-decoration: none;
}
<div class="cardcontainer">
<h1 class="cardheading">placeholder<i class="location">placeholder</i></h1>
<p class="cardpara">placeholder</p>
<a class="learnmorebutton" href="#" target="_blank">Learn More</a>
<img class="cardimg" src="https://via.placeholder.com/130?text=PLACEHOLDER">
</div>