使用％寬度（但要百分比基於先前/外父）

我作出了響應導航和跑進一個小問題，我使用SASS備案....使用％寬度（但要百分比基於先前/外父）

任何人知道的方式，我可以做一個子元素，基於用戶的任意寬度的百分比寬度視口的時候或在外部外父...見下文......

<div class="outer-parent"> 
    <div class="parent"> 
    <div class="child">

正如我所說的這可以是基於視口或其他外部父母之一的百分比寬度。 HTML佈局

截圖：

謝謝你們，基蘭

來源

2017-03-22 Kieran Wild

如果您將父元素設置爲30％寬度，則設置爲50％的子元素將爲父級30％的一半。 –

@ValentinoKožinec是的，但我想要的功能是......外部父母100％的整個視口（所以在我的情況下，導航容器）...父母是導航項目（所以會有多個與一個寬度的自動（意思是有內容將決定寬度）....那麼孩子（是下拉菜單）應該是整個頁面或外部父母的百分比寬度。 –

請參閱此問題[Make Div 100 ％的祖父母容器？]（http://stackoverflow.com/questions/18814838/make-div-100-of-grandparent-container） – Nicholas

像這樣的事情？

.parent{ 
    width = 90vw; 

    .child { 
    width = 50%; //50 % of 90vw. 
    } 
}

看一個例子沒有值設置爲父寬度

.oldParent { 
 
    margin: 0 auto; 
 
} 
 

 
.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    width: 50%; #this will be 50% of the parent width, no matter what width the parrent has" 
 
}

<div class="oldParent"> 
 
<div class="parent"> 
 
    <div class="child"> 
 
    Child 1 
 
    </div> 
 
    <div class="child"> 
 
    Child2 
 
    </div> 
 
    <div class="child"> 
 
    Child 3 
 
    </div> 
 
</div> 
 
</div>

來源

2017-03-22 18:19:30 Nicholas

我想避免使用設置父母的寬度，因爲我目前使用flex所以我的寬度設置爲auto，這是因爲本例中的父級是導航項目，那麼子級是下拉菜單，我希望它是整個頁面或整個導航容器的百分比寬度。沒有代碼例子只是co de很長也很複雜，可能會讓問題變得不太清楚） –

但是這樣可以工作，例如，如果您讓父級允許對自動寬度說，那麼通過設置子級的寬度將與父級相關。 – Nicholas

不，因爲如果我將父級設置爲width = auto並讓父級內的文本爲「Home」，則會使寬度大約爲20px的大小自動錶示。那麼這意味着如果我將子寬設置爲50％，它將繼承20px的寬度，得到10px寬的50％。而我想讓寬度爲500px的外部父寬度成爲它所繼承的寬度。明白我的意思嗎？ –

如果你知道有多少空間.outer-parent.parent用途，你可以做這樣的事情。

.parent { 
    width: 50%; 

    .child { 
     width: percentage(30/50); 
     /* 30% of .outer-parent == 60% of .parent */ 
    } 
}

來源

2017-03-22 18:31:51 Mary

使用％寬度（但要百分比基於先前/外父）

回答

相關問題