如何設置表格單元格的方向？

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