一些问题的解决_cannot call a namespace ('$') error: cannot call a-CSDN博客

本文链接：https://blog.csdn.net/a126789/article/details/75330646

今天晚上，王老师提出了一种新的布局方式，是没有发现的问题，让我的知识又有了拓展，现在就这个问题，我的结论总结。

<style type="text/css">
        .div1{
            width:400px;
            height:400px;
            background-color:cyan;
        }
        .left,.right{
            display:inline-block;
        }
        .left{
            width:100px;
            height:100px;
            background-color:greenyellow;
        }
        .right{
            width:100px;
            height:100px;
            background-color:cadetblue;.
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">
        其实天气很热
    </div>
    <div class="right">
        想天下雨
    </div>
</div>
</body>

可以看出，其实两个方块之间有一个间隙，那么有什么方法可以解决这个呢？

现在是有三种方法：

第一种：把两个相邻的div中间的空格去掉

<div class="left">
其实天气很热
</div><divclass="right">
想天下雨
</div>

第二种：在left和right选择器中添加margin-right，把值设置为负值

.left,.right{
display:inline-block;
margin-right:-5px;
}

第三种：在最大的div1的选择器中设置font-size=0

.div1{
    width:400px;
    height:400px;
    background-color:cyan;
    font-size:0;
}

以上就是出现间隙的解决办法。那再来说下，当出现错位的现象该如何解决？

<style type="text/css">
        .div1{
            width:400px;
            height:400px;
            background-color:cyan;
        }
        .left,.right{
            display:inline-block;
            margin-right:-8px;
        }
        .left{
            width:100px;
            height:100px;
            background-color:greenyellow;
        }
        .right{
            width:100px;
            height:100px;
            background-color:cadetblue;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">
        其实天气很热
    </div>
    <div class="right">
        <p>想天下雨</p>
        <p>想天下雨</p>
        <p>想天下雨</p>
    </div>
</div>

在<div class=”right”>中，多添加几行数据，用p标签表示，会出现的结果为：

会出现错位的现象，这是因为什么呢？今天晚上王老师讲了这个问题，说了几种解决方法。

第一种：在选择器中添加vertical-align: top;

.left,.right{
    display:inline-block;
    margin-right:-8px;
    vertical-align:top;
}

今天学习了这些，让我受益匪浅，但是还是这个错位的问题还是有一点模糊，我会在查资料来了解解决这个问题的。

里面本来是有图片显示的，但因为我没有保存图片，所以就没有图片，我以后会注意的。