如何设置表格单元格的方向？

Question

这是我的代码：

＆＃13;

＆＃13;

.table {
  display: table;
  width: 100%;
}

.table > div {
  display: table-cell;
  border: 1px solid red;
}

.container{
  background-color: #e0eaf1;
  width: 160px;
}

.author a, .editor a{
  font-size: 12px;
}
.author b, .editor b{
  font-size: 12px;
}

＆＃13;

<div class="table">
  <div class="share_edit_flag">
    <span>share</span>
    <span>edit</span>
    <span>delete</span>
  </div>

  <div class="editor">
    <div class="container">
      <a href="#">edited May 21 16 at 11:58</a>
      <div class="profile">
        <a href="#">Rory O'Kane</a>
        <b>12.6k</b>
        <!-- I don't have any badge in my website -->
      </div>
    </div>
  </div>

  <div class="author">
    <div class="container">
      <a href="#">asked May 21 16 at 11:51</a>
      <div class="profile">
        <a href="#">vasanthkumarmani</a>
        <b>1</b>
        <!-- I don't have any badge in my website -->
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想将.container框设置在表格单元格的右侧。我怎么能这样做？

当我将float: right设置为.container时，它也会影响.share_edit_flag元素并使其中断。

Answer 1

您可能希望熟悉flexbox，这对于避免像float这样的事情非常有用。

话虽如此，float最有可能的问题是你之后没有清除它们。如果您希望容器中的文本显示在右侧，那么您还需要将text-align: right;添加到.container。

我添加了container::after规则，会自动清除它们。看看这是否适合你：

.table {
  display: table;
  width: 100%;
}

.table > div {
  display: table-cell;
  border: 1px solid red;
  vertical-align: top;
}

.container{
  background-color: #e0eaf1;
  width: 160px;
  float: right;
}

.container::after{
  content: "";
  display: block;
  clear: both;
}

.author a, .editor a{
  font-size: 12px;
}
.author b, .editor b{
  font-size: 12px;
}

<div class="table">
  <div class="share_edit_flag">
    <span>share</span>
    <span>edit</span>
    <span>delete</span>
  </div>

  <div class="editor">
    <div class="container">
      <a href="#">edited May 21 16 at 11:58</a>
      <div class="profile">
        <a href="#">Rory O'Kane</a>
        <b>12.6k</b>
        <!-- I don't have any badge in my website -->
      </div>
    </div>
  </div>

  <div class="author">
    <div class="container">
      <a href="#">asked May 21 16 at 11:51</a>
      <div class="profile">
        <a href="#">vasanthkumarmani</a>
        <b>1</b>
        <!-- I don't have any badge in my website -->
      </div>
    </div>
  </div>
</div>

Answer 2

    .table {
      display: table;
      width: 100%;
    }

    .table > div {
      display: table-cell;
      border: 1px solid red;
    }

    .container{
      background-color: #e0eaf1;
      width: 100%;
      text-align: right;
    }

    .author a, .editor a{
      font-size: 12px;
    }
    .author b, .editor b{
      font-size: 12px;
    }