顯示三個區塊內聯CSS

Question

我有三個div的，#left_sidebar，#records_list和#right_sidebar，我想內嵌顯示他們，但是當我使用display:inline-block，一切似乎是罰款，但側邊欄放置在頁面bootom，然後我嘗試使用float，但仍然得到了一些creppy行爲，那麼我這樣做：

#left_sidebar { 
    top: 0px; 
    width: 142px; 
    float: left; 
} 

#records_list { 
    width: 530px; 
    display: inline-block; 
} 

#right_sidebar { 
    background-image: url('../images/enstein_banner.png'); 
    width: 174px; 
    height: 231px; 
    float: right; 
} 

（你看到float的和display混合），和一切工作正常，所以有人可以解釋我，如果是正確的？或者我需要以其他方式做這個嗎？謝謝！

P.S.如果你需要更多的信息，或者有點不清楚我所要求的，我會盡量改善問題。

Answer 1

#left_sidebar { 
 
    width: 10%; 
 
    padding: 20px; 
 
    background: red; 
 
    float: left; 
 
    margin-right: 1%; 
 
    color: #fff; 
 
} 
 
#records_list { 
 
    width: 50%; 
 
    padding: 20px; 
 
    background: red; 
 
    float: left; 
 
    margin-right: 1%; 
 
    color: #fff; 
 
} 
 
#right_sidebar { 
 
    background-image: url('../images/enstein_banner.png'); 
 
    width: 15%; 
 
    padding: 20px; 
 
    background: red; 
 
    height: 231px; 
 
    float: left; 
 
    color: #fff; 
 
}

<div class="wrapper"> 
 
    <div id="left_sidebar">left bar</div> 
 
    <div id="records_list">center part</div> 
 
    <div id="right_sidebar">right bar</div> 
 
</div>

請立即選中此

Answer 2

由於所有三個div都有固定的寬度，所以需要一個包裝寬度固定的寬度div。

並給了float:left代替inline-block

檢查小提琴 - https://jsfiddle.net/afelixj/racnob3f/

Answer 3

我知道你知道浮動的概念，我認爲你需要更多的澄清，有一個關於浮法了很好的討論，內聯，inline-block的位置請參考 float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Answer 4

給予浮動留給所有的小夥子，浮意味着他們將成爲內聯 和另一後，他們將顯示一個3210如果你想與保證金之間添加空間

做出改變這樣的：

#left_sidebar { 
width: 142px; 
float: left; 
} 

#records_list { 
width: 530px; 
float: left; 
} 

#right_sidebar { 
background-image: url('../images/enstein_banner.png'); 
width: 174px; 
height: 231px; 
float: left; 
}