在不同寬度的html頁面中生成塊

我有this fiddle，它有三個等寬的塊。我們如何能夠做出不同的尺寸，比如說100％，第一塊20％，第二塊50％，第三塊30％。在不同寬度的html頁面中生成塊

<div class="Row"> 
    <div class="Column">C1</div> 
    <div class="Column">C2</div> 
    <div class="Column">C3</div> 
</div><div class="Row"> 
    <div class="Column">C1</div> 
    <div class="Column">C2</div> 
    <div class="Column">C3</div> 
</div> 


.Row 
{ 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    border-spacing: 10px; 
} 
.Column 
{ 
    display: table-cell; 
    background-color: red; 
}

來源

2017-01-31 Kaizar Laxmidhar

你可以使用nth-child：

.Row { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-spacing: 10px; 
 
} 
 

 
.Column { 
 
    display: table-cell; 
 
    background-color: red; 
 
} 
 

 
.Column:nth-child(1) { 
 
    width:20%; 
 
} 
 
.Column:nth-child(2) { 
 
    width:50%; 
 
} 
 
.Column:nth-child(3) { 
 
    width:30%; 
 
}

<div class="Row"> 
 
    <div class="Column">C1</div> 
 
    <div class="Column">C2</div> 
 
    <div class="Column">C3</div> 
 
</div>

來源

2017-01-31 16:28:12 j08691

我需要部分地改變了每個單元的紅色背景色說，第一個單元格100％第二細胞100％和第三單元50 ％，那怎麼能實現呢？ –

我不明白你的意思。你是說第三個細胞應該是紅色和50％的不透明度？ – j08691

我的意思是第三個單元在第三個單元的總寬度的引用中應該是半滿的紅色和半白色。 –

在不同寬度的html頁面中生成塊

回答

相關問題