将 table-cell 内的两个行内块元素对齐到相对的边

Question

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

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

"Menu Link" 应该左对齐。 "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/

Answer 1

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

您可以使用伪元素强制文本像这样对齐。

.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>

如您所见，这个伪元素创建了一个 link 中断，它增加了 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>

Answer 2

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

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

我在第二个 .col-middle 元素（这是一个 table 单元格）中添加了一个额外的 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 是一个（嵌套）table，完全填满了它的容器（宽度：100%`）。我制作了它的子单元格 table-cells 并将第二个单元格中的文本对齐到右侧：

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

将 table-cell 内的两个行内块元素对齐到相对的边

Align two inline-block elements inside table-cell to opposite sides

html

css

text-alignment