html标签中两个div加起来等于100%时,为什么有的div被挤到下一行呢?


摘要:
下文讲述css标签在一个标签前面加入星号(*)的方法分享,如下所示:

问题分析:
     两个div加起来等于100%,最后一个div还是被挤到下一行,
 出现这种问题的原因是由于div同div之间还有一些隐藏的空格
下文将通过举例的方式,
讲述具体的实现方式:

例:

<meta charset='utf-8' />
<style>
.body {
    height: 100%;
    width: 100%;
}

div{
   height:30px;
   margin-top:10px;
   color:white;
}

.left {
    background-color: green;
    width: 70%; 
    display: inline-block;
}
 
.right {
    background-color: blue;
    display:inline-block;
    width: 30%; 
}
</style>


<body>

<p>
 maomao365.com <br />
div组合占比100%的示例分享
</p>
<p>
 方式1:div后面紧跟div
</p>
<hr />
    <div class="wrapper">
        <div class="left">
            div1
        </div><div class="right">
           div1
        </div>
    </div>



<p>
 方式2:div与div加上注释信息避免出现多余字符
</p>
<hr />
    <div class="wrapper">
        <div class="left">
            div1
        </div><!--

 --><div class="right">
           div1
        </div>
    </div>


<p>
 方式3:使用flex属性进行布局
</p>
<style>
.wrapper1 {
  display: flex;
}
   
 
.left1 {
  flex-basis: 70%;
  background: red;
}
 
.right1 {
  background: blue;
  flex: 1;
}
</style>
<hr />
    <div class="wrapper1">
        <div class="left1">
            div1
        </div><div class="right1">
           div1
        </div>
    </div>
</body>
css两个div等于百分之百的处理方法分享

css两个div等于百分之百的处理方法分享