div和left对齐div中的项目？

Question

如何布置div的内容，其中一个元素居中，另一个元素左对齐。

我尝试过flexbox - 如果不添加隐藏的第3个元素并证明内容合理，就不可能。

我也尝试在父级上进行文本对齐，但之后所有内容都以一种方式对齐（居中或左侧）。

HTML：

.left{

}

.center{

}

<div class="container">
  <div class="left">
    I'm left aligned
  </div>
  <div class="center">
    I'm center aligned
  </div>
</div>

编辑：

我正在对齐div本身，并且相对于父级居中。

Answer 1

你可以使用flex和：after元素作为隐藏元素：

＆＃13;

＆＃13;

.container {
  display: flex;
  border: 1px solid #000;
}

.container:after {
  content: " ";
  display: block;
  flex: 1;
}

.left,
.center {
  border: 1px solid #0F0;
  flex: 1;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="left">
    I'm left aligned
  </div>
  <div class="center">
    I'm center aligned
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<强> RESULT

  

如何在一个元素居中的情况下布局div的内容   另一个对齐了。

你可以使用基于百分比的宽度，只需将它分开就可以了

.container {
  border: 1px solid;
  width: 500px;
  height: 200px;
  //text-align: center;
}

.left {
  float: left;
  width: 33.33%
}

.right {
  float:left;
  width:33.33%;
  text-align:right;
}

.center {
  float: left;
  width: 33.33%;
  text-align:center;
}

<div class="container">
  <div class="left">
    I'm left aligned
  </div>
  <div class="center">
    I'm center aligned
  </div>
  <div class="right">
  An examplatory div...
  </div>
</div>