页面排版两个div 放在一个div里面用百分比站位

分类：MUI

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
body{
background:yellow;
}
.mm{
margin-left:-10px;
margin-right:-10px;
}
.mm>.mm1{
margin-left:0px;
margin-right:0px;
padding: 0px 0px;
width:20%;
}
.mm .mm1~.mm2{
margin-left:0px;
margin-right:0px;
padding: 0px 0px;
width:80%;
}
</style>
<script type="text/javascript" charset="UTF-8">
mui.init();
</script>
</head>
<body>
</BR>
</BR>
</BR>
<div class="mm">

    <div class="mm1" style=";height:50px;background:red;display:inline-block;">  

    </div>      
    <div class="mm2" style="height:50px;background:pink;display:inline-block;">  

    </div>      
    </div>

</body>
</html>

我想要的是外层div里面的2个div以百分比占满整个div层，效果图如前面一个，但是2个内部div层+=100%的时候或出现图层错开的问题，请教下，这个怎么个解决方法？！