如何使用CSS顯示div的相等寬度？

我正在從數據庫獲取輸出。有時我得到2個div，有時我得到3個div，所以我必須設置div的等寬。我的意思是如果有2個div，然後設置每個的50％，如果有3個div，則設置每個的33.33％。你能幫我嗎？如何使用CSS顯示div的相等寬度？

#container1 
 
    { 
 
    width: 100%; 
 
    display: inline-flex; 
 
    } 
 
#container1 div{ 
 
     color: #fff; 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 50%; 
 
    background: #24252A; 
 
    text-align: center; 
 
    cursor: default; 
 
    padding: 2em 0; 
 
} 
 

 
#container1 div:nth-of-type(2) { 
 
    background: red; 
 
    } 
 

 
#container1 div:nth-of-type(3) 
 
{ 
 
    width: 33.33% !important; 
 
}

<div id="container1"> 
 
    <!--div depanding upload database--> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2017-08-30 Narendra Verma

您可以定義寬度基於使用這個問題的答案子女數https://stackoverflow.com/questions/8720931/can-css-detect-the更新片段 - 子元素數量有 – kinggs

不是動態的。 Flexbox可以設置**初始**寬度，但內容會改變這些框的大小以反映其個別需求。 –

如果有人給予downvote然後請解釋它爲什麼我和答案得到downvote？ –

使用flex: 1 100%和刪除寬度：

#container1 
 
    { 
 
    width: 100%; 
 
    display: inline-flex; 
 
    } 
 
#container1 div{ 
 
     color: #fff; 
 
    display: inline-block; 
 
    height: 100%; 
 
    flex: 1 100%; 
 
    background: #24252A; 
 
    text-align: center; 
 
    cursor: default; 
 
    padding: 2em 0; 
 
} 
 

 
#container1 div:nth-of-type(2) { 
 
    background: red; 
 
    }

<div id="container1"> 
 
    <!--div depanding upload database--> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

#container1 
 
    { 
 
    width: 100%; 
 
    display: inline-flex; 
 
    } 
 
#container1 div{ 
 
     color: #fff; 
 
    display: inline-block; 
 
    height: 100%; 
 
    flex: 1 100%; 
 
    background: #24252A; 
 
    text-align: center; 
 
    cursor: default; 
 
    padding: 2em 0; 
 
} 
 

 
#container1 div:nth-of-type(2) { 
 
    background: red; 
 
    }

<div id="container1"> 
 
    <!--div depanding upload database--> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2017-08-30 10:57:54 Huelfe

爲什麼downvote？ – Huelfe

感謝您的回覆。它爲我工作。 Upvote從我身邊。 –

#container1, #container2 
 
{ 
 
    width: 100%; 
 
    height: 50px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    border:1px solid red; 
 
    margin: 20px 0px; 
 

 
} 
 
#container1 div, #container2 div{ 
 
    flex: 1; 
 
    height: 100%; 
 
    border: 1px solid gray; 
 

 
}

<div id="container1"> 
 
    <!--div depanding upload database--> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div id="container2"> 
 
    <!--div depanding upload database--> 
 
    <div></div> 
 
    <div></div> 
 
</div>

嘗試使用display: flex。

來源

2017-08-30 10:56:59 zynkn

爲什麼Downvote ..？ – zynkn

使用flex:1兒童與父

注：不需要width也不display:inline-block在子元素孩子

.ct { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.ct div { 
 
    color: #fff; 
 
    height: 100%; 
 
    background: #24252A; 
 
    text-align: center; 
 
    cursor: default; 
 
    padding: 2em 0; 
 
    flex: 1 
 
} 
 

 
.ct div:nth-of-type(2) { 
 
    background: red; 
 
}

<div class="ct" id="container1"> 
 
    <!--div depanding upload database--> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<hr /> 
 
<div class="ct" id="container2"> 
 
    <!--div depanding upload database--> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2017-08-30 10:58:33 dippas

Paulie_D你錯了。添加內容不會改變元素的寬度。他們都是平等的。 – Huelfe

謝謝你的答覆。它對我有用。 Upvote從我身邊。 –

只使用flex-grow: 1;。檢查以下

#container1 
 
    { 
 
    width: 100%; 
 
    display: flex; 
 
    } 
 
#container1 div{ 
 
     color: #fff; 
 
    display: inline-block; 
 
    height: 100%; 
 
    background: #24252A; 
 
    text-align: center; 
 
    cursor: default; 
 
    padding: 2em 0; 
 
    flex-grow: 1; 
 
} 
 

 
#container1 div:nth-of-type(2) { 
 
    background: red; 
 
    }

<div id="container1"> 
 
    <!--div depanding upload database--> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

來源

2017-08-30 10:59:37

爲什麼選擇Downvote？沒有任何評論或理由 –

感謝您的答覆。它爲我工作。 Upvote從我身邊。 –

你好@Super用戶，你能幫我下面這個鏈接https://stackoverflow.com/questions/45946778/how-to-display-ajax-response-value-in-column-format-individual/45956293?noredirect= 1＃comment78873235_45956293 –

如何使用CSS顯示div的相等寬度？

回答

相關問題