图像不会与文本一起出现在div中

我试图让一个图像出现在文本旁边的div的最右侧，但它一直出现在该区域之外。我不想硬编码的空白，以迫使它出现在那里。有没有一个属性可以让它出现在我丢失的文本旁边？

<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 400px;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<p style="max-width: 50%">Image<p>
<img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload" width="15%">
</div>
</body>
</html>

使.boxdivdisplay: flex; justify-content: space-between; width: 100%;

使img宽度50px

所以你的代码是这样的：

<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 100%;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
img {
width: 50px;
}
</style>
</head>
<body>
<div class="box">
<p>Image<p>
<img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload">
</div>
</body>
</html>

您可以使用Flexbox:

<!DOCTYPE html>
<html>
<head>
<style>
.box{
height: 80px;
width: 400px;
font-size: 14px;
line-height: 45px;
font-family: Georgia;
font-size: 16px;
background-color: white;
border: 1px solid black;
display:flex;
}
</style>
</head>
<body>
<div class="box">
<p style="max-width: 50%">Image<p>
<img style="float:right" src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" alt="imagedownload" width="15%">
</div>
</body>
</html>

相关内容

最新更新

热门标签：