使用浮動與畫布的CSS佈局問題

我想獲得一個特定的佈局工作，我有問題。我想要的佈局是兩個畫布，堆疊在彼此的頂部並與左側對齊，兩個div也堆疊在彼此的頂部，並水平對齊堆疊畫布的右側和右側。要做到這一點，我有2個div容器，一個用於堆疊的畫布，另一個用於堆疊的div。這兩個容器左邊浮動。使用浮動與畫布的CSS佈局問題

我希望看到的是：

+------------+--------+ 
| canvas  | div | 
|   +--------+ 
+------------+ div | 
| canvas  +--------+ 
|   | 
+------------+

我遇到的問題是，堆疊的div移動堆疊畫布下方。此外，容納畫布的容器被拉伸到右邊緣，填充畫布右側的區域，在那裏我預計會出現堆疊的div。即使畫布右側的堆疊div有足夠的空間。

什麼我卻越來越是這樣的：

+------------+ - - - - - - + 
| canvas  | canvas  | 
|   | container 
+------------+    | 
| canvas  |    
|   |    | 
+--------+---+ - - - - - - + 
| div | 
+--------+ 
| div | 
+--------+

如果我改變畫布到的DIV然後我得到正是我想要和預期（除了沒有畫布）！所以，這導致我問，有什麼不同的畫布元素，使我的佈局失敗？佈置畫布元素有特別的考慮嗎？在浮動的元素中，畫布需要以不同的方式處理？例如標記/ CSS低於：

的HTML：

<body> 
    <div class="container"> 
     <div class="canvases" style="background: yellow"> 
<!-- 
      <div class="myCanvas" style="background: #606060"></div> 
      <div class="myCanvas" style="background: #808080"></div> 
--> 
      <canvas class="myCanvas" style="background: #606060"></canvas> 
      <canvas class="myCanvas" style="background: #808080"></canvas> 
     </div> 
     <div class="numbers" style="background: red"> 
      <div class="pValue" style="background: #606060">1234</div> 
      <div class="pValue" style="background: #808080">4321</div> 
     </div> 
    </div> 
</body>

的CSS：

body 
{ 
    background: black; 
} 

.canvases 
{ 
    float: left; 
} 

.myCanvas 
{ 
    width: 200px; 
    height: 100px; 
} 

.numbers 
{ 
    float: left; 
    width: 100px; 
} 

.pValue 
{ 
    border: 2px solid #a0a0a0; 
    border-radius: 10px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    text-align: center; 
    font: bold 28pt Calibri; 
}

如果你想試試這個簡單的切換與畫布的div在HTML（他們被評論）看看divs如何工作取代畫布。感謝您的任何幫助。

來源

2014-04-01 Bill Balloni

默認情況下，canvas有CSS display: inline-block;而div有display: block;

來源

2014-04-01 19:35:59 aneelkkhatri

注意，在Chrome中，我看到了'display'值實際上是'默認inline'。 – PhistucK

@aneelkkhatri，在畫布的CSS中添加display：block可以解決問題！非常感謝你的幫助。 –

使用浮動與畫布的CSS佈局問題

回答

相關問題