如何使图片与容器的右边框对齐

Question

我想让第一张图片在黑色div的右边对齐，但是我不能移动图片"Char"。

http://www.charlestonshop.it/homepageteo.html

    <style type="text/css"> 
  html, body {
    width:100%;
    height:100%;
    margin:0;
}
div#container {
    height:100%;
}
div#container div {
    width:50%;
    height:100%;
    float:left;
    background-repeat:no-repeat;
    background-size:contain;
}
div#container div#left {
    /* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
    background-position: right;
background-color: black;
}
div#container div#right {
   /* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
    background-position: left;
background-color: white;
}
.charleft img{
        max-width:100% !important;
        height:auto;
        display:block;
    }
    .charright img{
            max-width:100% !important;
            height:auto;
            display:block;
                        float:right;
        }
</style>

Answer 1

将下面的样式添加到你的css中，如果你已经有了合适的规则-添加额外的样式作为下面的outline:

#left{
  position:relative; /* have a reference point for child positioning */
}
.charleft img{
  position:absolute; /* position absolutely */
  right:0; /* position on the right hand side of the parent, #left */
}

与使用float相比，这样做的好处是，您不必清除浮动，也不必适应它可能稍后对布局造成的任何更改。

Answer 2

你必须添加float: right到包含图像的。charleftdiv

.charleft{
    float: right;
}

Answer 3

这很容易做到，只需将其添加到您的CSS代码中。

#left > .charleft{
    float: right;
}

。