如何用相對比例設置元素的寬度？

例如，我想設置的紅色寬度的比率：綠：藍爲1：2：1個相對於母體，我試圖使用他們，這似乎得到了我期望的結果：如何用相對比例設置元素的寬度？

<table style="width:100%;height:50px;"> 
 
    <tr> 
 
    <td style="height:100%;background-color:red;width:1em;"> 
 
    </td> 
 
    <td style="height:100%;background-color:green;width:2em;"> 
 
    </td> 
 
    <td style="height:100%;background-color:blue;width:1em;"> 
 
    </td> 
 
    </tr> 
 
</table>

但是當它具有0EM的元素並沒有消失：

<table style="width:100%;height:50px;"> 
 
    <tr> 
 
    <td style="height:100%;background-color:red;width:1em;"> 
 
    </td> 
 
    <td style="height:100%;background-color:green;width:0em;"> 
 
    </td> 
 
    <td style="height:100%;background-color:blue;width:1em;"> 
 
    </td> 
 
    </tr> 
 
</table>

根據em的描述，似乎不太可能用於定義元素的相對寬度/高度。

是否正確使用em？如果不正確，那麼實現此目的的正確方法是什麼？

來源

2017-06-22 ggrr

也許你可以嘗試視窗尺寸：HTTPS：//css-tricks.com/viewport-sized-typography/ –

的「正確的方式」開始的時候很可能會先全部停止使用表格佈局的目的（除非你試圖在這裏顯示實際的表格數據，但目前還沒有跡象表明）。表格有它們自己的佈局算法，你可以部分影響（主要是通過'table-layout'） - 但是試圖創建一個100％寬度的表格，然後創建3個1em/0/1em大小的列，這是一個相當荒謬的事情開始。根據你實際想要在這裏實現的目標，像flexbox這樣的東西可能是一個更好的選擇。 – CBroe

em是相對於（父元素的）字體大小的，所以如果你增加了字體大小，你也會看到你的元素的大小增加 - 試試看看。 vw或％年齡在這裏可能更適合。 –

這就是所謂的「細胞填充」簡單地給你的表格單元格td一個padding: 0;

<table style="width:100%;height:50px;"> 
 
    <tr> 
 
    <td style="height:100%;background-color:red;width:1em;"> 
 
    </td> 
 
    <td style="height:100%;background-color:green;width:0em;padding: 0;"> 
 
    </td> 
 
    <td style="height:100%;background-color:blue;width:1em;"> 
 
    </td> 
 
    </tr> 
 
</table>

編輯：再次閱讀你的文章後，你要搜索的內容是百分比。這將允許您使用父母寬度的百分比。

A 1：2：1的比例爲25％：50％：25％

<table style="width:100%;height:50px;"> 
 
    <tr> 
 
    <td style="height:100%;background-color:red;width:25%;"> 
 
    </td> 
 
    <td style="height:100%;background-color:green;width:50%;"> 
 
    </td> 
 
    <td style="height:100%;background-color:blue;width:25%;"> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-06-22 09:49:06 AlexG

代替em可以使用%。檢查下面的代碼片段。另外補充cellpadding="0"

<table style="width:100%;height:50px;" cellpadding="0"> 
 
    <tr> 
 
    <td style="height:100%;background-color:red;width:25%;"> 
 
    </td> 
 
    <td style="height:100%;background-color:green;width:50%;"> 
 
    </td> 
 
    <td style="height:100%;background-color:blue;width:25%;"> 
 
    </td> 
 
    </tr> 
 
</table>

，或者你可以去flexbox

ul { 
 
    list-style: none; 
 
    display: flex; 
 
    padding: 0px; 
 
} 
 
li { 
 
    flex-grow:1; 
 
} 
 
li.double { 
 
    flex-grow: 2; 
 
}

<ul> 
 
<li style="background-color:red;">1</li> 
 
<li class="double" style="background-color:green;">2</li> 
 
<li style="background-color:blue;">3</li> 
 
</ul>

來源

2017-06-22 09:50:50

'vw'只在容器填滿整個頁面的寬度時才起作用。「視口寬度」 – AlexG

另一個注意事項：如果在這種情況下不是表格，總共40vw將不起作用。與divs相同的佈局只會填充頁面的40％。你需要使用'25vw 50vw 25vw'，因爲整頁有'100vw' – AlexG

表ELE有細胞間距和細胞貼壁。像下面那樣設置cellpadding =「0」。它會解決你的問題。

<table style="width:100%;height:50px;" cellpadding="0"> 
 
    <tr> 
 
    <td style="height:100%;background-color:red;width:1em;"> 
 
    </td> 
 
    <td style="height:100%;background-color:green;width:0em;"> 
 
    </td> 
 
    <td style="height:100%;background-color:blue;width:1em;"> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-06-22 09:53:36

<table style="width:100%;height:50px;border-collapse: collapse;"> 
 
    <tr> 
 
    <td style="height:100%;background-color:red;width:50%;"> 
 
    </td> 
 
    <td style="height:100%;background-color:green;width:0;"> 
 
    </td> 
 
    <td style="height:100%;background-color:blue;width:50%;"> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-06-22 10:04:45 Atiq

我就堅持不使用佈局的目的表，而使用div的，但是你的答案

<table style="width:100%;height:50px;"> 
 
    <tr> 
 
    <td style="height:100%;background-color:red;width:50%;"> 
 
    </td> 
 
    <td style="height:100%;background-color:green;width:0;"> 
 
    </td> 
 
    <td style="height:100%;background-color:blue;width:50%;"> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-06-22 13:23:01

如何用相對比例設置元素的寬度？

回答

相關問題