錯誤位置的Div內容

我試圖把3個div放在與以下代碼相同的行中。錯誤位置的Div內容

我的CSS和HTML：

.row { 
 
    display: table; 
 
    width: 100% 
 
} 
 
.row > div { 
 

 
    display: table-cell; 
 
    height:30px; /*demo purposes */ 
 
} 
 
#left-bar { 
 
    width: 10%; 
 
    background-color: #FF0000; 
 
} 
 
#middle-bar { 
 
    width: 70%; 
 
    background-color: #6600FF; 
 
} 
 
#right-bar { 
 
    width: 20%; 
 
    background-color: #99FF99; 
 
}

<div class="row"> 
 
    <div id="left-bar"> here I have an accordion </div> 
 
    <div id="middle-bar"> heve a have my canvas </div> 
 
    <div id="right-bar"> and here I have an editor</div> 
 
</div>

不知怎的，中等吧（我的畫布）的內容被放置在正確的位置，但其他兩個div內容是在頁面底部，你可以在這裏看到see photo。你們知道爲什麼會這樣嗎？

來源

2015-06-10 Rafael

哪個瀏覽器/版本，你的測試？（您的照片鏈接已損壞） – Sampson

Chromium Ubuntu – Rafael

您能張貼小提琴嗎？因爲照片的鏈接不工作？ – Alex

在評論中與你進一步討論這個項目後，並在聊天，我覺得你應該使用flexbox代替的方法。該代碼是相當直截了當：

.container { 
 
    display: flex; 
 
} 
 

 
.left { flex-basis: 10%; background: #F99; } 
 
.right { flex-basis: 20%; background: #99F; } 
 
.middle { flex-basis: 70%; background: #9F9; }

<div class="container"> 
 
    <div class="left">L</div> 
 
    <div class="middle">C</div> 
 
    <div class="right">R</div> 
 
</div>

來源

2015-06-10 05:17:06 Sampson

嘿，Jonathan不幸的是它仍在發生......我想我打破了矩陣，只是在開玩笑，我在代碼中做錯了什麼，但我不知道它在哪裏。我嘗試刪除畫布，其他兩個div的表現正確，所以我認爲錯誤與我的畫布有關，但我不確定 – Rafael

如果添加'.table，.table * {box-sizing：border-box }'解決方案？ – Sampson

添加這個和你提到的其他東西？我會在這裏嘗試 – Rafael

我只管理寬度。沒有什麼問題可以看到。

.row { 
 
    display: table; 
 
    width: 100% 
 
} 
 
.row > div { 
 

 
    display: table-cell; 
 
    height:30px; /*demo purposes */ 
 
} 
 
#left-bar { 
 
    width: 20%; 
 
    background-color: #FF0000; 
 
} 
 
#middle-bar { 
 
    width: 60%; 
 
    background-color: #6600FF; 
 
} 
 
#right-bar { 
 
    width: 20%; 
 
    background-color: #99FF99; 
 
}

<div class="row"> 
 
    <div id="left-bar"> here I have an accordion </div> 
 
    <div id="middle-bar"> heve a have my canvas </div> 
 
    <div id="right-bar"> and here I have an editor</div> 
 
</div>

來源

2015-06-10 04:57:57 Dimple

嘿，酒窩，不幸的是，同樣的事情正在發生。 – Rafael

嘗試'float：left' – Dimple

試圖在每個div內添加「float：left」，現在一切都很奇怪（超出位置）。男人我沒有意識爲什麼這是happennig – Rafael

錯誤位置的Div內容

回答

相關問題