1回答

好帮手慕久久

2021-11-20

同学你好，代码没有错误，但是整体效果有点丑，建议做如下调整：

1、建议给div.box设置固定宽度，并调整背景色：

2、div.box共有两个子元素（儿子），分别是img和div.box1，二者在一行显示，因此建议将浮动设置在二者身上，这样更好些：

3、左侧按钮位置有点靠上：

建议往下调整一下：

4、右侧图片太大了，整体不协调，建议调小：

代码如下：

 .box {
            /* width: 100%; */
            width:750px;
            /* background-color: gray; */
            background-color: #f1f1f1;
            overflow: hidden;
            /* 让其整体居中 更好看 */
            margin: 0 auto;
        }

        .box .btn {
            float: left;
            /* padding: 40px; */
            padding: 62px;
        }

        /* .box .box1 .car {
            float: right;
        } */

        .box .box1 {
            position: relative;
            float: right;
        }
        .box .box1 img{
            /* width数值 让效果 看着合适就行 */
           width: 160px;
           /* img距离右侧的距离，最好等于按钮距离父元素左侧的距离 */
           margin: 20px 62px 20px 0;
        }
        .box .box1 span {
            position: absolute;
            top: 10px;
            /* right: 3px; */
            right: 50px;
            display: block;
            width: 40px;
            height: 40px;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }

祝学习愉快！

0