如何将图片与容器的右边框对齐答案

【问题标题】：How to align a picture to the right border of the container如何将图片与容器的右边框对齐
【发布时间】：2014-05-16 21:50:27
【问题描述】：

我希望将第一张图片与黑色 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>

【问题讨论】：

请不要链接到您的网站。原因如下：meta.stackoverflow.com/questions/125997/…

标签： css image alignment

【解决方案1】：

如果您已经有规则，请将以下内容添加到您的 css - 添加其他样式，如下所示：

#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 相比，这样做的好处是您不必清除浮动，或适应它以后可能对您的布局造成的任何更改。

【讨论】：

总是使用 float 作为最后的手段，这样会更好
这行得通，但是当您调整浏览器的大小时，它不会正确反应。不是吗？

【解决方案2】：

您必须将 float: right 添加到包含图像的 .charleft div

.charleft{
    float: right;
}

【讨论】：

【解决方案3】：

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

#left > .charleft{
    float: right;
}

就是这样。

【讨论】：