Question

我有三个div，#left_sidebar，#records_list和#right_sidebar，我希望将它们内联显示，但是当我使用{{1}时，所有似乎都很好，但侧边栏放在页面的bootom上，然后我尝试使用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; }＆{39}和float的混音），一切正常，有人可以解释一下，如果是的话吗？或者我需要以其他方式做到这一点？谢谢！

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 class="row"> <div class="col-lg-12 col-md-12"> If you would like to know more about rules and regulations around fgas testing then please click the more info page or read the posts below. </div> </div>都有固定宽度，因此您需要一个包裹def add_them(x, y): """ :param x: :param y: :return: """ z = x + y return z宽度的固定宽度。

并提供了div而不是div

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

Answer 3

我知道你知道浮点数的概念，我想你需要更多的澄清，关于float，inline，inline-block有一个很好的讨论，请参考 float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Answer 4

向所有人提供浮动，浮动意味着他们将成为内联他们会一个接一个地展示出来如果你想在它们之间添加边距

进行如下更改：

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

显示三个内嵌CSS块

4 个答案: