上传图片的时候,整个div里的元素会上移要怎么处理

在做一个图片截图当头像的功能,用到了cropper插件,再上传图片的时候,很奇怪,每更换一次图片,父级div里的元素就会整体上移,如果我删除了正方形的浮动属性好像就不会,可是没有浮动属性,正方形不能在那个位置,这可怎么处理?
第一次更换:
clipboard.png
第二次更换:
clipboard.png
如图所示,每更换一次父级黑线框不会动,但是里面的元素就会整体跑上去。

oval_container指的就是圆形的框,rect_container就是正方形框
clipboard.png

回复
阅读 2.6k
4 个回答

为什么不用定位position呢?清除一下浮动吧

矩形框整体上移,但左右没有变化,说明float:right有效果。只上移你可以关注一下前后margin-top的变化。尝试中和上移。

那就直接去掉正方形的浮动,左边box做浮动,右边正方形盒子overflow:hidden,通过调整左边盒子的margin-right设置左右盒子的间距

/*个人头像*/
    div.photo_container{
        border:4px solid black;
        width:310px;
        border-radius:10px;
        height:200px;
        margin-top:5px;
        margin:auto;
        padding-right:10px;
    }
    div.oval_container{
        overflow: hidden;
        width: 80px;
        height: 80px;
        margin-left:20px;
        margin-top:15px;
        -moz-border-radius: 40px;
        -webkit-border-radius: 40px;
        border-radius: 40px;
        border:2px solid #067BAD;
    }//圆形
    div.rect_container{
        float:right;
        margin-top:-85px;
        width:170px;
        height:170px;
        border:2px solid #067BAD;
        border-radius: 10px;
    } //正方形框
    div.rect_container img{
        max-width: 100%;
        max-height: 100%;
    }  //正方形框的图片
    label.upload_photo{
        width:73px;
        font-size:8pt;
        display:block;
        margin-top:10px;
        margin-left:22px;
    }
    button.submit_photo{
        display:block;
        font-size:8pt;
        margin-top:10px;
        margin-left:22px;
        margin-top:10px;
    }
    <div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <h4 class="modal-title" id="photoModalLabel" style="color: #000;padding-bottom:6px;">修改头像</h4>
                    <div class='photo_container'>
                        <div class='oval_container' id="cropperPreimg"></div>
                        <div class='rect_container'><img src="" alt="" id="cropperImg"></div>
                        
                        <label class="btn btn-default btn-primary upload_photo" for="cropperFile">上传文件</label>
                        <form><input type="file" accept="image/jpeg" id="cropperFile" style="position:absolute;clip:rect(0 0 0 0);"></form>
                        
                        <button class="btn btn-default btn-success submit_photo" id="cropperSub">&nbsp;&nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏