如何对齐div位置

Question

我正在创建脚本以在客户端显示上载图像的预览,并选择将其删除.

我已经完成了所有这些但是UI部分的问题是关闭图标的位置不是右上角对齐的.

这是代码和JSfiddle链接,在JSfiddle上测试它通过浏览按钮添加图像.

jQuery(function($) {
  $('div').on('click', '.closeDiv', function() {
    $(this).prev().remove();
    $(this).remove();
    $('#upload-file').val("");
  });

  var fileInput = document.getElementById("upload-file");

  fileInput.addEventListener("change", function(e) {

    var filesVAR = this.files;

    showThumbnail(filesVAR);

  }, false);



  function showThumbnail(files) {
    var file = files[0]

    var $thumbnail = $('#thumbnail').get(0);

    var $image = $("<img>", {
      class: "imgThumbnail"
    });
    var $pDiv = $("<div>", {
      class: "divThumbnail",
      style: "float: left"
    });
    var $div = $("<div>", {
      class: "closeDiv",
      style: "float: right"
    }).html('X');

    $pDiv.append($image, $div).appendTo($thumbnail);
    var reader = new FileReader()
    reader.onload = function(e) {
      $image[0].src = e.target.result;
    }
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    $image.on('load', function() {
      ctx.drawImage($image[0], 100, 100);
    })
  }
});

img {
  width: 30%;
  float: left;
  height: 100px;
  width: 100px;
}
.closeDiv {
  width: 20px;
  height: 21px;
  background-color: rgb(35, 179, 119);
  float: left;
  cursor: pointer;
  color: white;
  box-shadow: 2px 2px 7px rgb(74, 72, 72);
  text-align: center;
  margin: 5px;
}
.pDiv {
  float: left;
  width: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="image/*" />

http://jsfiddle.net/r0taz01L/11/

Answer 1

你需要付出代价

 .divThumbnail {
position: relative;
}

并关闭这种风格

.closeDiv {
    position: absolute;
    width: 20px;
    height: 21px;
    background-color: rgb(35, 179, 119);
    float: right;
    cursor: pointer;
    color: white;
    box-shadow: 2px 2px 7px rgb(74, 72, 72);
    text-align: center;
    margin: 5px;
    right:0px;
}

这里是完成的解决方案 http://jsfiddle.net/r0taz01L/12/