为什么我的div图像没有出现在父div内？

Question

I am making an author box. I want the person's picture at the right of the box while still inside the parent div. Whatever styles I apply, I can't make the picture appear inside the div and on the right smoothly, what is wrong here?

 .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

Try this solution using flex box.

 .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> 

Answer 2

Are you locating your image properly from your folders? Also, you can try this

.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 3

First of all a div with no height and width won't be seen, so you div with the background has to have a defined width/height so you can see it.

and you put in the right by positioning it absolute and right:0 or a small amount just to push it from the edge.

 *, *: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 4

Your .personImg1 has width:100%; and height:100%; , which means it gets the full width and height of its parent container - ie relative settings.

But the parent container's only CSS property is .personContainer { float:right; } .personContainer { float:right; } – there are no width or height settings for it, resulting in zero height both for this container, the .personImg1 DIV and therefore also the background-image of .personImg1 . So you need to assign some width and height to .personContainer

Actually you might want to consider to just use a regular img tag instead of that .personImg1 DIV and its background-image...