出于某种原因，视频和侧边栏 div 不断将彼此推到 wrapper div 之外。此外，似乎由于某种原因未定义主包装器 div。我已经弄乱了几个小时，但似乎没有任何效果。有没有人可以指点一下。
https://jsfiddle.net/4z5wwq2j/
谢谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#wrapper{
width: 100%;
height: 500px;
white-space: nowrap;
display: inline-block;
}
#sidebar{
height: 420px;
width: 10%;
background-color: red;
}
#video{
border-radius: 25px;
background: #C5EFF7;
border: 5px solid #19B5FE;
padding: 20px;
width: 65%;
height: 420px;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="video"></div>
</div>
</body>
</html>最佳答案
您还必须为 #sidebar div 设置 display: inline-block;:
https://jsfiddle.net/4z5wwq2j/1/
#sidebar{
height: 420px;
width: 10%;
background-color: red;
display:inline-block;
}
根据需要为它们设置垂直对齐。
关于javascript - 子 div 不在父 div 中并排堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36948233/