：最後一個孩子不能在嵌套divs工作

我有簡單的div結構，在那我有7列float: left。我想通過使用:last-child將float: right應用到最後一列，但它不起作用。：最後一個孩子不能在嵌套divs工作

以下是HTML和CSS。

<div class="boc-practice-impact-main"> 
    <div class="bocpi-header">Practice Impact</div> 
     <div class="bocpi-body-main"> 
      <div class="bocpi-column">1</div> 
      <div class="bocpi-column">2</div> 
      <div class="bocpi-column">3</div> 
      <div class="bocpi-column">4</div> 
      <div class="bocpi-column">5</div> 
      <div class="bocpi-column">6</div> 
      <div class="bocpi-column">7</div> 
     <div class="clearfix"></div> 
     </div> 
</div> 

.boc-practice-impact-main { 
    width: 100%; 
    background-color: red; 
} 
.boc-practice-impact-main .bocpi-header { 
    width: 100%; 
    background-color: #49bad7; 
    line-height: 20px; 
    text-align: center; 
    margin-top: 3px; 
} 
.boc-practice-impact-main .bocpi-body-main { 
    width: 100%; 
    background-color: #333333; 
    line-height: 20px; 
    text-align: center; 
    margin-top: 3px; 
} 
.boc-practice-impact-main .bocpi-body-main .bocpi-column { 
    width: calc(100%/7 - 21px); 
    background-color: #f4f8fc; 
    float: left; 
    margin: 5px 21px 20px 0px; 
    padding: 5px; 
    min-height: 200px; 
} 
.business-outcome-main-div-new .bocpi-body-main .bocpi-column:last-child { 
    width: calc(100%/7 - 20px); 
    background-color: #ff0000; 
    float: right; 
    margin: 5px 0px 20px 0px; 
    padding: 5px; 
    min-height: 200px; 
}

高級感謝您的解決方案。

來源

2017-04-03 Manoj

試試'bocpi-body-main：last-child .bocpi-column'假設你錯過了結束標記 – Akshay

y我們的專欄似乎沒有被正確終止 – happymacarts

嗨Akshay，它不適合我。 – Manoj

沒有last-child類選擇器，它將針對.bocpi-body-main的最後一個孩子。

在你的情況，你可以通過刪除<div class="clearfix"></div>繞過它，並使用基於CSS的明確的修復，使用僞元素::after

.boc-practice-impact-main .bocpi-body-main::after { /* clearfix */ 
    content: ''; 
    display: block; 
    clear: both; 
}

堆棧網頁摘要

.boc-practice-impact-main { 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 

 
.boc-practice-impact-main .bocpi-header { 
 
    width: 100%; 
 
    background-color: #49bad7; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    margin-top: 3px; 
 
} 
 

 
.boc-practice-impact-main .bocpi-body-main { 
 
    width: 100%; 
 
    background-color: #333333; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    margin-top: 3px; 
 
} 
 

 
.boc-practice-impact-main .bocpi-body-main::after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.boc-practice-impact-main .bocpi-body-main .bocpi-column { 
 
    width: calc(100%/7 - 21px); 
 
    background-color: #f4f8fc; 
 
    float: left; 
 
    margin: 5px 21px 20px 0px; 
 
    padding: 5px; 
 
    min-height: 200px; 
 
} 
 

 
.boc-practice-impact-main .bocpi-body-main .bocpi-column:last-child { 
 
    width: calc(100%/7 - 20px); 
 
    background-color: #ff0000; 
 
    float: right; 
 
    margin: 5px 0px 20px 0px; 
 
    padding: 5px; 
 
    min-height: 200px; 
 
}

<div class="boc-practice-impact-main"> 
 
    <div class="bocpi-header">Practice Impact</div> 
 
    <div class="bocpi-body-main"> 
 
    <div class="bocpi-column">1</div> 
 
    <div class="bocpi-column">2</div> 
 
    <div class="bocpi-column">3</div> 
 
    <div class="bocpi-column">4</div> 
 
    <div class="bocpi-column">5</div> 
 
    <div class="bocpi-column">6</div> 
 
    <div class="bocpi-column">7</div> 
 
    </div> 
 
</div>

來源

2017-04-03 15:42:55 LGSon

非常感謝LGSon。它爲我工作。非常感謝你。 – Manoj

否bocpi-column元素是其容器的最後一個孩子。

<div class="clearfix"></div>或<div class="bocpi-body-main">是。

您的HTML無效。如果您使用了a validator，它會提醒您代碼中有許多缺少</div>標籤。

來源

2017-04-03 15:19:07 Quentin

：最後一個孩子不能在嵌套divs工作

回答

相關問題