孩子的定位。 .div 在父母内部。 div 与子 .div 在父 div 的右侧

Question

我有一个父 .div（标题），文本位于左侧。我想将子 .div（其中包含旋转图像）定位到父/标题 .div 的右侧。我正在使用 flexbox 模型来构建页面。

我搜索的所有内容都没有用。这是 CSS：

/* Style the header */
.header {
  position: relative;
  background-image: url("images/code.jpg");
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  padding: 10px 30px 20px 150px; /* Top - Right - Bottom - Left short hand padding notation*/
  text-align: left;
  font-size: 30px;
  text-shadow: 4px 4px darkorange;

}
/*header image*/

}
.child{
   width:100px;
  height:100px;
  background-color:#999999;
  position:absolute;
  bottom:0px;
  right:0px;

}

<div class="header">
  <h1>Eric Launderville</h1>
  <p style="font-size: 35px" >IT Support Specialist</p> <br>

   <div class="child">
    Hello
    </div>

    <div id="mySidenav" class="sidenav">
        <a href="#" id="home"><i class="fa-solid fa-house fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Home</a>
        <a href="#" id="about"><i class="fa-solid fa-laptop-code fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp; </i>About</a>
        <a href="#" id="contact"><i class="fa-solid fa-address-book fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Contact</a>
        <a href="#" id="email"><i class="fa-solid fa-at fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>E-mail</a>
        <a href="#" id="facebook"><i class="fa-brands fa-facebook fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Facebook</a>
        <a href="#" id="linkedin"><i class="fa-brands fa-linkedin-in fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>LinkedIn</a>
    </div>

</div>

Answer 1

如果我没理解错的话，你想做这样的事情。你能试试并给我反馈吗？

header {
    background-color: black;
    color: white;
    padding: 10px 30px 20px 150px;
    font-size: 2rem;
    text-shadow: 4px 4px darkorange;
}
#header-main {
        display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-images{
    background-image: url("images/code.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width:100px;
    height:100px;
    background-color:#999999;
}

<header>
    <div id="header-main">
        <div class="header-text">
            <h1>Eric Launderville</h1>
            <p style="font-size: 2.5rem" >IT Support Specialist</p> 
        </div>
        <div class="header-images">

                Hello
            <!-- Rotating images here -->
        </div>

    </div>

    <nav id="mySidenav" class="sidenav">
        <a href="#" id="home"><i class="fa-solid fa-house fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Home</a>
        <a href="#" id="about"><i class="fa-solid fa-laptop-code fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp; </i>About</a>
        <a href="#" id="contact"><i class="fa-solid fa-address-book fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Contact</a>
        <a href="#" id="email"><i class="fa-solid fa-at fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>E-mail</a>
        <a href="#" id="facebook"><i class="fa-brands fa-facebook fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Facebook</a>
        <a href="#" id="linkedin"><i class="fa-brands fa-linkedin-in fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>LinkedIn</a>
    </nav >
</header>