儿童div不是并排堆放在父div内

由于某些原因，视频和边栏div在包装div之外互相推送。另外，它看起来像主包装div没有被定义为某种原因。我现在一直在搞乱几个小时，看起来没什么用。有些人可以给我一些指示。儿童div不是并排堆放在父div内

谢谢。

<!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>

来源

2016-04-29 Carlos Frank

了解一些[Flexbox]（http://flexboxin5.com） – vsync

必须设置display: inline-block;为#sidebar DIV以及：

https://jsfiddle.net/4z5wwq2j/1/

#sidebar{ 
    height: 420px; 
    width: 10%; 
    background-color: red; 
    display:inline-block; 
}

设置垂直对齐，以及对他们俩的你需要。

来源

2016-04-29 22:19:40

display：inline-block in sidebar works – david

儿童div不是并排堆放在父div内

回答

相关问题