内联显示三个块 CSS

Question

我有三个 div，#left_sidebar，#records_list 和 #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 的混合），一切正常，如果正确的话，有人可以向我解释一下吗？或者我需要以其他方式做到这一点？谢谢！

P.S。如果您需要更多信息，或者对我的问题有点不清楚，请直接说，我会尽力改进问题。

Answer 1

由于三个div都是固定宽度，所以需要一个wrapping div width 固定宽度

并给了 float:left 而不是 inline-block

勾选 fiddle - https://jsfiddle.net/afelixj/racnob3f/

Answer 2

我知道你知道float的概念，我想你需要更多的说明，关于float, inline, inline-block here有很好的讨论请参考 float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Answer 3

将 float left 给所有的人，float 意味着他们将成为 inline 他们会一个接一个地展示如果你想在它们之间添加 space 和边距

进行如下更改：

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

Answer 4

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

现在请检查这个

内联显示三个块 CSS

Display three blocks inline CSS

html

css

position