兒童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內

回答

相關問題