为什么我的 div 图像没有出现在父 div 中?

Question

我正在制作一个作者框。 我希望这个人的照片在框的右侧，同时仍在父div 内。无论我应用什么样式，我都无法使图片流畅地出现在div 内部和右侧，这里有什么问题？

.authorBox {
background: #222222;
width: 100%;
padding:1.5em 2em;
position: relative;
border-left:15px solid #d53362;
box-sizing: border-box;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color:#444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personImg1 {
width:100%;
height:100%;
background-size: cover;
background-image: url(../img/person1.jpeg);
}
.personContainer {
float:right;
}

<div class="authorBox">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat at nisl laoreet ultrices"</p>
<div class="personContainer">
<div class="personImg1"></div>
</div>  
</div>

Answer 1

首先，不会看到没有高度和宽度的div，因此带有背景的div 必须具有定义的宽度/高度，以便您可以看到它。

你通过定位它来放置它 绝对和右：0 或少量只是为了从边缘推动它。

*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.authorBox {
background: #222222;
width: 100%;
padding: 1.5em 2em;
position: relative;
border-left: 15px solid #d53362;
box-sizing: border-box;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color: #444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personContainer {
height: 100px;
width: 300px;
position: absolute;
right: 10px;
top: 1.5em;
}
.personImg1 {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url('http://via.placeholder.com/350x150');
}

<div class="authorBox">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat at nisl laoreet ultrices"
</p>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>

Answer 2

您的.personImg1具有width:100%;和height:100%;，这意味着它获得其父容器的完整宽度和高度 - 即相对设置。

但是父容器的唯一 CSS 属性是.personContainer { float:right; }– 它没有宽度或高度设置，导致此容器、.personImg1DIV 以及.personImg1的背景图像的高度为零。所以你需要为.personContainer分配一些宽度和高度

实际上，您可能需要考虑仅使用常规img标签，而不是.personImg1DIV及其背景图像...

Answer 3

您是否从文件夹中正确定位了图像？ 另外，你可以试试这个

.personImg1 {
display:block;
position:absolute;
background:url("../img/person1.jpeg");
background-size: 100% 100%;
background-repeat:no-repeat;
width:100%;
height:100%;
float:right;
bottom:0;
right:0;
}

Answer 4

使用弹性框尝试此解决方案。

.authorBox {
background: #222222;
width: 100%;
padding: 1.5em 2em;
position: relative;
border-left: 15px solid #d53362;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color: #444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personImg1 {
width: 100px;
height: 100px;
background-size: cover;
background-image: url(../img/person1.jpeg);
}

<div class="authorBox">
<div class="colContainer">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat
at nisl laoreet ultrices"</p>
</div>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>