html - 剩余空间居中和居中的CSS

Question

我当前的元素中有一个当前问题，我想在其中放置一些文本。此文本可能与该区域的每次使用不同。

这部分我已经完全理解了，但是我想放置另一段文字，恰好在第一个文字末尾和区域末尾之间剩余空间的中心。

我将如何构建我的 css 和 html 以实现这一点？

下图应该有助于显示它是什么，我想做什么:

html,
body {
  height: 100%;
  text-align: center;
}

#left {
  width: 200px;
  display: inline-block;
  background: #f00;
  height: 200px;
  justify-content: center;
}

#right {
  display: inline-block;
  background: #0f0;
  height: 200px;
}

<div id="left">
  CONTENT
</div>
<div id="right">
  Other content
</div>

编辑:抱歉没有包含代码我的尝试:http://jsfiddle.net/5jRaY/298/

我得到了想要的红色 block ，除了 div 应该包裹容器。我的问题是我无法让绿框填充页面的剩余空间。

Answer 1

您可以尝试不同的布局。这就是我将要使用的:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#wrapper {
  display: table;
  width: 100%;
  text-align: center;
}

#one,
#two,
#three {
  display: table-cell;
  width: 33.333%;
}

#one {
  width: 200px;
  height: 200px;
  background: white; /*Change color to see it*/
}

#two {
  background: red;
  height: 200px;
}

#three {
  height: 200px;
  background: green;
}

<div id="wrapper">
  <div id="one"></div>
  <div id="two">CONTENT</div>
  <div id="three">Other content</div>
</div>

让我知道它是否适合您!