Question

我有这样的事情：

＆＃13;

#left,
#middle,
#right {
  float: left;
  display: inline;
}

#left,
#right {
  width: 20%;
  background-color: green;
}

#middle {
  width: 60%;
}

＆＃13;

<div id="container">
  <div id="left">foo</div>
  <div id="middle">Main content goes here</div>
  <div id="right">bar</div>
</div>

＆＃13;

只要left和right div具有部分内容，就可以很好地将中间div夹在中间。

但是，只要我从left和right div中删除内容 foo 和/或 bar ，就会{{1} div将自己停靠在左边，好像左边的div从不存在。

我如何保留这三个div保留我分配给他们的百分比宽度，无论他们是否有任何内容？

Answer 1

使它们inline-block而不是内联元素并删除浮点数

body {
  margin: 0;
}

#left,
#middle,
#right {
  display: inline-block;
}

#left,
#right {
  width: 20%;
  background-color: green;
}

#middle {
  width: 58%;
  background: #ddd;
}

<div id="container">
  <div id="left"></div>
  <div id="middle">Main content goes here</div>
  <div id="right"></div>
</div>

如果您不需要任何内容，这是另一个更简单的解决方案：

body {
  margin: 0;
}


#middle {
  width: 60%;
  background: #ddd;
  margin: 0 auto;
}

<div id="container">
  <div id="left"></div>
  <div id="middle">Main content goes here</div>
  <div id="right"></div>
</div>

Answer 2

你需要：

让#left，#middle和#right有display: inline-block代替display: inline
从每个元素

float: left

稍微缩小#middle以适应填充（我选择了width: 58%）

任选地：

向元素添加height（因为inline-block默认没有高度）
添加line-height等于height，以便任何文字具有相同的高度
添加vertical-align: middle以确保文字垂直居中

#left,
#middle,
#right {
  display: inline-block; /* Display the elements next to each other */
  height: 30px; /* Set the images to the same height */
  line-height: 30px; /* Set the text to have the same height */
  vertical-align: middle; /* Center the text vertically */
}

#left,
#right {
  width: 20%;
  background-color: green;
}

#middle {
  width: 58%;
  text-align: center;
}

<body>
  <div id="container">
    <div id="left"></div>
    <div id="middle">Main content goes here</div>
    <div id="right"></div>
  </div>
</body>

希望这有帮助！：）

Answer 3

浮动元素需要此行为。

如果相关元素为:empty，请考虑声明最小宽度。

示例：

#left:empty, #right:empty { min-width: 20%; background-color: green; }

挡住浮球：

#left, #middle, #right { float: left; display: inline; } #left, #right { width: 20%; background-color: green; } #middle { width: 60%; } /* Additional */ #left:empty, #right:empty { min-width: 20%; background-color: green; min-height: 20px; /* for the sake of demonstration */ }

<div id="container"> <div id="left">foo</div> <div id="middle">Main content goes here</div> <div id="right">bar</div> </div> <div style="clear: both"><br></div> <div id="container"> <div id="left"></div> <div id="middle">Main content goes here</div> <div id="right"></div> </div>

或者，可以删除float属性以支持display: inline-block属性，空元素仍将在DOM结构中保留指定的宽度。

内联块方法：

#container { letter-spacing: -5px; /* rid ourselves of whitespace between elements created by inline-block elements */ } #left, #middle, #right { display: inline-block; letter-spacing: normal; /* reset letter spacing */ } #left, #right { width: 20%; background-color: green; min-height: 20px; /* for the sake of demonstration */ } #middle { width: 60%; }

<div id="container"> <div id="left">foo</div> <div id="middle">Main content goes here</div> <div id="right">bar</div> </div> <br> <div id="container"> <div id="left"></div> <div id="middle">Main content goes here</div> <div id="right"></div> </div>

最后，如果您还没有flex-box，还可以考虑在一系列条件下保留布局的最简单方法，包括嵌套元素为空的条件。

Flex-Box方法：

#container { display: flex; /* and that's really all you need... */ } #left, #middle, #right { display: inline-block; /* useless now, but keep it here anyway for those old people still using Internet Explorer 11 */ } #left, #right { width: 20%; background-color: green; } #middle { width: 60%; }

<div id="container"> <div id="left">foo</div> <div id="middle">Main content goes here</div> <div id="right">bar</div> </div> <br> <div id="container"> <div id="left"></div> <div id="middle">Main content goes here</div> <div id="right"></div> </div>

如何将具有主要内容的div水平居中于两个空div之间

3 个答案:

挡住浮球：

内联块方法：

Flex-Box方法：