Css：調整可變寬度的子div div

如何使用固定寬度在父div內調整具有可變寬度的子div。我想證明子div不僅在單行上，而且在整個父容器內。
父和子元素是動態生成的。Css：調整可變寬度的子div div

<div class="parent"> 
    <div class="child">1.2345</div> 
    <div class="child">1:223345</div> 
    <div class="child">1:23421225</div> 
    <div class="child">1:2345</div> 
    <div class="child">1:235</div> 
    <div class="child">1:2345</div> 
    . 
    . 
    . 
    30 Child elements 
</div>

CSS

.parent{ 
    width:450px; 
    text-align:justify; 
} 
.child{ 
    float: left; 
    margin: 2px; 
}

輸出是這樣的

修訂
現在我已經設置寬度取決於它的文本長度每個孩子的div。

來源

2017-07-21 Android jack - Rajesh Gosemath

你不能給子div添加寬度嗎？ – Kramb

我動態生成的div所以增加寬度是不可能的...因爲每個孩子有不同的寬度 –

.parent{ 
 
\t width:250px; 
 
\t text-align:justify; 
 
\t border: 1px solid #ddd; 
 

 
\t display: flex; 
 
\t flex-direction: row; 
 
\t flex-wrap: wrap; 
 
} 
 
.child{ 
 
\t margin: 2px; 
 
}

<div class="parent"> 
 
     <div class="child">1.2345</div> 
 
     <div class="child">1:2345</div> 
 
     <div class="child">1:2345</div> 
 
     <div class="child">1:2345</div> 
 
     <div class="child">1:2345</div> 
 
     <div class="child">1:2345</div> 
 
     . . . 30 Child elements 
 
    </div>

demo add 30 +

來源

2017-07-21 12:36:50 bhv

子div有可變寬度..並且這適用於相等的寬度 –

我動態地將子視圖添加到父級而不設置它們的寬度在jquery你想證明這些孩子的意見..我無法爲孩子設置寬度..因爲他們的文本是可變長度.. –

-1

CSS的Flex盒可以做的工作，但你必須確保瀏覽器的兼容性。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 另外，在使用flexbox之前，有幾個概念要理解。最終，它可以解決許多CSS佈局問題。

另外，您可能需要使用javascript來動態調整元素的大小。

來源

2017-07-21 12:37:03

一旦所有孩子的div已被添加到DOM，你可以得到具有最大寬度的元素，然後設置每個其他的div的寬度。

var childDivs = [].slice.call(document.querySelectorAll("div.child")); 
var maxWidth = Math.max.apply(null, childDivs.map(function(ele){ 
    return ele.offsetWidth; 
})); 
for(var i = 0; i < childDivs.length; i++){ 
    childDivs[i].style.width = maxWidth + "px"; 
}

來源

2017-07-21 12:51:32 Kramb

Css：調整可變寬度的子div div

回答

相關問題