将 table-cell 内的两个 inline-block 元素对齐到相对的两侧答案

【问题标题】：Align two inline-block elements inside table-cell to opposite sides将 table-cell 内的两个 inline-block 元素对齐到相对的两侧
【发布时间】：2016-10-06 02:55:27
【问题描述】：

我想在表格单元格内左对齐一个 div 并右对齐另一个 div。我试图证明文本的合理性，但它似乎不适用于我的设置。 正在寻找一个纯 css 解决方案。 我也不能使用浮点数。

下面的演示将显示我当前的布局。徽标无关紧要，但它是我设置的一部分，因此我将其包括在内。

“菜单链接”应左对齐。 “Facebook”应该右对齐。

<div class="container">
<div class="row">
<div class="row-height">
  <div class="logo-text col-middle">
    <span>Logo Text</span>
  </div>
  <div class="menu-social-outer col-middle text-justify">
    <div class="menu">
      <a href="#">Menu Link</a>
    </div>
    <div class="social">
      <a href="#">Facebook</a>
    </div>
  </div>
</div>
</div>
</div>

演示：https://jsfiddle.net/yq9nyyg1/

【问题讨论】：

你可以使用引导 CSS 吗？如果是这样，请执行此操作
如果你只是修改一点标记呢？它会让你的工作更轻松。您可以将<div class="menu"> 或<div class="social"> 移动到它们自己的表格单元容器中。之后，您只需将text-align: right; 添加到所需的容器中。
我知道以这种方式完成它是可能的，但我想在同一个表格单元中实现它。
@AntonioHernández 似乎没有人可以在同一个表格单元中完成答案。只是想对您的意见表示感谢，不得不给出与您的评论相同的答案。

标签： html css text-alignment

【解决方案1】：

关于 IE8 兼容性的评论后的新答案：

https://jsfiddle.net/f2hy3dvm/3/

我在第二个 .col-middle 元素（它是一个表格单元）内添加了一个额外的 div，将两个已经存在的元素包装起来，如下所示：

  <div class="menu-social-outer col-middle text-justify">
    <div class="extra1">
      <div class="menu">
        <a href="#">Menu Link</a>
      </div>
      <div class="social">
        <a href="#">Facebook</a>
      </div>
    </div>
  </div>

这个新元素extra1 是一个（嵌套的）表格，完全填满了它的容器（宽度：100%`）。我制作了它的子表格单元格并将第二个单元格中的文本对齐到右侧：

.extra1 {
  display: table;
  background: #fa0;
  width: 100%;
}
.extra1 > * {
  display: table-cell;
}
.extra1 .social {
  text-align: right;
 }

【讨论】：

希望保留 IE8+ 兼容性。
你能改变 HTML（即添加一些东西）还是只改变 CSS？
是的，如果需要，我可以更改 html 布局和 css。
请注意我的全新答案

【解决方案2】：

这是可能的，尽管该方法确实有轻微的副作用。

您可以使用伪元素来强制文本如此对齐。

.container {
  /*for demo only */
  margin-top: 2em;
  width: 80%;
}
.logo-text {
  width: 100px;
}
.menu,
.social {
  display: inline-block;
}
.menu a {
  color: red;
}
.social a {
  color: green;
}
.row-height {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}
.col-middle {
  display: table-cell;
  float: none;
  height: 100%;
  vertical-align: middle;
}
.menu-social-outer {
  background: pink;
}
.menu-social-outer::after {
  content: '';
  width: 100%;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="row-height">
      <div class="logo-text col-middle">
        <span>Logo Text</span>
      </div>
      <div class="menu-social-outer col-middle text-justify">
        <div class="menu">
          <a href="#">Menu Link</a>
        </div>
        <div class="social">
          <a href="#">Facebook</a>
        </div>
      </div>
    </div>
  </div>
</div>

正如你所见，这个伪元素创建了一个增加 div 高度的链接中断。 我还没有找到解决方法。

或者，不要使用 CSS 表格......使用 Flexbox。

.container {
  /*for demo only */
  margin-top: 2em;
  width: 80%;
}
.logo-text {
  width: 100px;
}
.menu,
.social {} .menu a {
  color: red;
}
.social a {
  color: green;
}
.row-height {
  display: flex;
}
.col-middle {} .menu-social-outer {
  background: pink;
  flex: 1;
  display: flex;
  justify-content: space-between;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="row-height">
      <div class="logo-text col-middle">
        <span>Logo Text</span>
      </div>
      <div class="menu-social-outer col-middle text-justify">
        <div class="menu">
          <a href="#">Menu Link</a>
        </div>
        <div class="social">
          <a href="#">Facebook</a>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

如果你能找到一个可靠的解决方案来解决由伪造成的中断，那将是理想的。想保留 IE8+ 的兼容性，所以 flex 不起作用，虽然我知道这绝对是最简单的方法。