顯示三個塊的內聯CSS

Question

我有三個div ， #left_sidebar ， #records_list和#right_sidebar ，我想#right_sidebar聯方式顯示它們，但是當我使用display:inline-block ，一切似乎都很好，但是側邊欄放置在頁面的尾部，然后嘗試使用float ，但仍然出現一些爬行行為，那么我這樣做：

#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和display看到混合），並且一切正常，所以有人可以解釋一下嗎？ 還是我需要以其他方式執行此操作？ 謝謝！

PS：如果您需要更多信息，或者不清楚，我只是想說些什么，我將嘗試改善問題。

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

我知道您了解float的概念，我想您需要進一步澄清，有關float，內聯，內聯塊的討論很好，請參見float：left;。 vs display：inline; vs display：inline-block; vs display：table-cell;

Answer 4

將浮點數留給所有bloks，float表示它們將變為內聯，並且如果您要在它們之間添加邊距，它們將一個接一個地顯示

進行如下更改：

#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;
}