问题描述之当盒子没有设置宽高被内容撑开小BUG

最新推荐文章于 2021-12-21 11:44:35 发布

Yannnnnm

最新推荐文章于 2021-12-21 11:44:35 发布

阅读量1.1k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Yannnnnm/article/details/107558982

版权

问题简述–借用蛋壳的图片为例

在项目开始时测量的数据用在盒子里总是达不到预想效果，需要自己改掉部分数据，调整才能达到
下面简单演示遇到的问题：
目标左右对齐，左边图片尺寸为690px400px,右边盒子上下上面的图片尺寸为480px210px，下面两张小图片为235px*180px，而且经过测量原型图右边上下两张部分图片的距离为10px，左右对齐，且这一整个大盒子的高度为400px。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>       
        .middle_img {
            width: 1180px;
            margin: auto;
        }     
        .middle_img .left_img {
            float: left;
        }    
        .middle_img .right_img {
            float: right;
        } 
        .bottom_right_img {
            margin-top: 10px;
        }
         .bottom_right_img .last_middle {
            margin-left: 6px;
        }
    </style>
</head>
<body>
    <div class="middle_img">
        <div class="left_img">
            <img src="./img/action.jpg" alt="" class="action">
        </div>
        <div class="right_img">
            <div class="top_right_img">
                <img src="./img/paopao.jpg" alt="">
            </div>
            <div class="bottom_right_img">
                <img src="./img/party.jpg" alt="">
                <img src="./img/bangong.jpg" alt="" class="last_middle">
            </div>
        </div>
    </div>
</body>
</html>

此时的效果图为

显然我们可以发现右边的高于左边部分，并且经过页面查看此时左边盒子尺寸为690px404px，右边盒子尺寸为480.734px408px，不符合要求

解决办法：

此时我们的盒子是由内容撑开的，图片在div盒子里会存在基线问题，因此我们可以给盒子设置定高定宽来解决问题
如下

    <style>
        .middle_img {
            width: 1180px;
            margin: auto;
            height: 400px;
        }
        .middle_img .left_img {
            float: left;
            height: 400px;
            width: 690px;
        }
        .middle_img .right_img {
            float: right;
            height: 400px;
        }     
        .top_right_img {
            height: 210px;
        }
        .bottom_right_img {
            margin-top: 10px;
            height: 180px;
        }       
        .bottom_right_img .last_middle {
            margin-left: 6px;
        }
    </style>

此时的效果图为

显然此时已经对其，此时盒子的高度为400px。

总结：

在实际开发中，我们要习惯性的给盒子以宽高，多的部分隐藏，而不是让盒子被内容撑开，避免后面的布局出现问题，当然具体情况还是要依据实际情况来定。。

Yannnnnm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
问题描述之当盒子没有设置宽高被内容撑开小BUG

问题简述–借用蛋壳的图片为例在项目开始时测量的数据用在盒子里总是达不到预想效果，需要自己改掉部分数据，调整才能达到下面简单演示遇到的问题：目标左右对齐，左边图片尺寸为690px400px,右边盒子上下上面的图片尺寸为480px210px，下面两张小图片为235px*180px，而且经过测量原型图右边上下两张部分图片的距离为10px，左右对齐，且这一整个大盒子的高度为400px。<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫