html - 嵌套 Div 中的移动图像

Question

我已经看了半个小时了，我不知道我做错了什么......

我有嵌套的 div，像这样:

<div id="header">
   <div id="header_left"><img src="~/images/image1.png"></div>
   <div id="header_right"><img src="~/images/image2.png"></div>      
</div><!--End Header-->

基本上，我的嵌套 div 将屏幕水平分成左右两部分。

Image1 是一个标志，占据了 header_left 的大部分

Image2 是一个小图片，我试图让它移动到 header_right 的右下角。

这是我的 CSS:

#header{
padding-top: 15px;
padding-bottom: 15px; 
padding-left: 15px;
margin-left: 0px;
background-color: #000;
display: block;
overflow: hidden;
position: relative;
}

#header_left{
float: left;
width: 50%;
}

#header_right{
float: right;
height: 100%;
width: 50%;  
position: absolute;
bottom: 0;
right: 0;
}

就目前而言，image2 位于 header_right 的左上角，我无法将其移动到任何位置。

感谢任何帮助!!!

Answer 1

应该可以了。您必须使用单独的规则定位 img，即 #header_right > img

#header {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  margin-left: 0px;
  background-color: #000;
  display: block;
  overflow: hidden;
  position: relative;
}
#header_left {
  float: left;
  width: 50%;
}
#header_right {
  right: 0;
  position: absolute;
  bottom: 0;
}
#header_right > img {

  float: right; 
}

<div id="header">
  <div id="header_left">
    <img src="~/images/image1.png">
  </div>
  <div id="header_right">
    <img src="~/images/image2.png">
    <img src="~/images/image3.png">
  </div>
</div>
<!--End Header-->