Question

我一直在看这个半小时左右，我无法弄清楚我做错了什么......

我有嵌套的div，像这样：

raw_input

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

Image1是一个徽标，占据了header_left

的大部分内容

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

这是我的CSS：

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

现在看来，image2位于header_right的左上角，我不能让它移动到任何地方。

任何帮助表示赞赏!!!!

Answer 1

应该这样做。您必须使用单独的规则定位img，即#header_right > img

＆＃13;

#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; 
}

＆＃13;

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

＆＃13;

Answer 2

一个好的起点是不仅要选择div容器，还要选择如下图像：

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

#header_right{
    float: right;
    height: 100%;
    width: 50%;  
}

#header_right img{
    position: absolute;
    bottom: 0;
    right: 0;
}

在嵌套Div中移动图像

2 个答案: