下面的代码中，当两个标签处于同一行则布局成功，当标签换行，则布局失败相应的也换行。当然如果我将其改成右79%左边20%则布局成功~求解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left, .right, .bottom {
height: 100px;
}
.left {
width:20%;
background: red;
}
.right {
background: blue;
}
.bottom {
background: yellow;
}
.left,.right {
display:inline-block;
}
.right {
width:80%;
}
</style>
</head>
<body>
<div class="main">
<div class="left">DIVA</div><div class="right">DIVB</div> //标签不换行，ok
</div>
<div class="bottom">DIVC</div>
<div class="main">
<div class="left">DIVA</div>
<div class="right">DIVB</div> //标签换行 ，布局失败
</div>
<div class="bottom">DIVC</div>
</body>
</html>
修正：去掉css样式.left,.right {display:inline-block;}，得：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left, .right, .bottom {
height: 100px;
}
.left {
width:20%;
background: red;
}
.right {
background: blue;
}
.bottom {
background: yellow;
}
.right {
width:80%;
}
</style>
</head>
<body>
<div class="main">
<div class="left">DIVA</div><div class="right">DIVB</div>
</div>
<div class="bottom">DIVC</div>
<div class="main">
<div class="left">DIVA</div>
<div class="right">DIVB</div>
</div>
<div class="bottom">DIVC</div>
</body>
</html>空白间隙的问题(●'◡'●)
这是display:inline-block的空白间隙问题
对如下格式的div设置display:inline-block;会产生div之间的空白间隙(换行符导致)：
<div>content1</div>
<div>content2</div>由于有空隙的存在，20%宽度+空隙宽度+80%宽度 > 100%宽度，造成第二个div另起一行布局。
<div>content1</div><div>content2</div>上面代码的写法是消除空隙的其中一种方法，当然，还有其他方法。
空隙产生原因：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。
解决方式供参考：
如何解决inline-block元素的空白间距
如何消除inline-block产生的元素间空隙