用于居住空间居中和居中的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/

我得到的红色块符合要求，除了div应该包装容器。我的问题是，我无法获得绿色框来填充页面的剩余空间。

Answer 1

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

public class A {
  public ObservableCollection<C> ListOfC { get; }
  public int SomeMemberD { get; }
}

public class C {
  public string Name { get; set; }
  public bool Enabled { get; set; }
}

public class AVM : A, INotifyPropertyChanged {
  // ListOfC is member of AVM inherited from A 
  // but is a list of C, not CVM
}
public class CVM : C, INotifyPropertyChanged {
  // Inherits Name and Enabled from C
}

让我知道它是否适合你！

Answer 2

希望这会有所帮助：

＆＃13;

＆＃13;

#container {
  height: 200px;
  text-align: center;
  position: relative;
}

#left {
  width: 200px;
  margin: auto;
  height: 100%;
  background: #f00;
}

#right {
  top: 0;
  right: 0;
  bottom: 0;
  background: #0f0;
  position: absolute;
  width: calc(50% - 100px); /* 100px is 50% of #left */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;