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

Question

这里是我的代码：

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

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

我想设置.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; 
    }