Question

我想左对齐一个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/

Answer 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;
 }

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

或者，不要使用CSS Tables ....使用Flexbox。

＆＃13;

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

＆＃13;

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

＆＃13;

将表格单元格内的两个内联块元素对齐到相对的两侧

2 个答案: