div中的Div填充完整的父DIV沒有顯示：表

我想創建類似於行和單元格的表，但我不想使用行和單元格，我目前使用DIV元素和所有內容直到我嘗試調整內部DIV元素的寬度以填充其父DIV（這將是行）的寬度，而不必對所需百分比進行精確計算。div中的Div填充完整的父DIV沒有顯示：表

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid black; 
 
} 
 

 
.container > div { 
 
    width: inherit; 
 
    display: inline-flex; 
 
    border: 5px solid red; 
 
} 
 

 
.container > div > div { 
 
    border: 5px solid green; 
 
    height: 50px 
 
}

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-05 lxxtacoxxl

究竟是什麼你想實現什麼？ – Ryan

從MDN：

柔性CSS屬性是一個速記屬性指定柔性項目，以改變其尺寸以填充可用空間的能力。

您需要提供flex: 1;到.container > div > div擴大內div元素。

.container > div > div { 
    border: 5px solid green; 
    height: 50px 
}

Demo

來源

2017-04-05 14:00:50

可以使用flex屬性：

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid black; 
 
} 
 

 
.container>div { 
 
    width: inherit; 
 
    display: inline-flex; 
 
    border: 5px solid red; 
 
} 
 

 
.container>div>div { 
 
    border: 5px solid green; 
 
    height: 50px; 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-05 14:00:51 sol

或許這就是你需要什麼？（最裏面的DIV要繼承寬度太）

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid black; 
 
} 
 

 
.container > div { 
 
    width: inherit; 
 
    display: inline-flex; 
 
    border: 5px solid red; 
 
} 
 

 
.container > div > div { 
 
    width: inherit; 
 
    border: 5px solid green; 
 
    height: 50px 
 
}

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-05 14:05:44

在這裏，我對您的CSS的變化，但你需要做的柔性當您嘗試自動增長您的div。看看.container > div > div造型。

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid black; 
 
} 
 

 
.container > div { 
 
    width: inherit; 
 
    display: inline-flex; 
 
    border: 5px solid red; 
 
    
 
    
 
} 
 

 
.container > div > div { 
 
    border: 5px solid green; 
 
    height: 50px; 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-05 14:06:37 dutchsociety

div中的Div填充完整的父DIV沒有顯示：表

回答

相關問題