將子寬度設置爲包含邊界的父寬度

如何設置.inner類的寬度和對齊方式以匹配父級的寬度？將子寬度設置爲包含邊界的父寬度

可能的解決方案是：

設置box-sizing: content-box和left: -1px（邊框大小）
設置left: -1px和right: -1px

但我認爲這些解決方案並不完美，因爲你必須知道父母的邊界大小和/或您必須使用box-sizing: content-box但我想要避免這種情況。

而且我不能只是改變DOM層次，因爲我希望再整，它們通過JS框架

你知道有什麼更好的解決方案生成的元素？

*, *:before, *:after{ 
 
    box-sizing: border-box; 
 
} 
 

 
.outer{ 
 
    border: 1px solid black; 
 
    width: 50%; 
 
    position: relative; 
 
    } 
 

 
.inner{ 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0px; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    // box-sizing: content-box; 
 
    // left: -1px; 
 
}

<div class="outer"> 
 
    text 
 
    <div class="inner">Inner</div> 
 
</div>

來源

2016-09-16 warch

一種選擇可能是使用了css3 outline property，其功能類似於border，但不會增加寬度的元素。

來源

2016-09-16 11:42:52 Larkeith

是的我已經試過它與大綱，但我有一些divs之間，我不想 – warch

啊，這是不幸的額外的邊界。我不知道任何其他解決方案，除了你列出的解決方案，除了做一些可笑的矯枉過正的事情，比如通過Javascript後代修改DOM。 – Larkeith

我只注意到我添加了輪廓屬性到多個div上的類。 – warch

我認爲最簡單的辦法是這樣的：

（所有其它設置不能真正幫助 - 你有有left: -1px;，有沒有辦法將其鏈接到邊框厚度

。

.outer{ 
 
    border: 1px solid black; 
 
    width: 50%; 
 
    position: relative; 
 
    } 
 

 
.inner{ 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    left: -1px; 
 
}

<div class="outer"> 
 
    text 
 
    <div class="inner">Inner</div> 
 
</div>

來源

2016-09-16 11:53:05 Johannes

.outer{ 
    border: 1px solid black; 
    width: 50%; 
    position: relative; 
    } 

.inner{ 
    position: relative; 
    top: 100%; 
    left: 0px; 
    width: 100%; 
    border-top: 1px solid #000; 
}

這是你是什麼looki ng爲？您可以使用外部div的邊框，因爲它已經位於底部並伸展到外部div的寬度。

所有你需要的是border-top: 1px solid #000;。

來源

2016-09-16 11:57:23

將子寬度設置爲包含邊界的父寬度

回答

相關問題