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中 - 添加其他样式，如下所示：

#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添加到包含图像的.charleft div

.charleft{
    float: right;
}

Answer 3

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

#left > .charleft{
    float: right;
}

这就是全部。

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

3 个答案: