Css：对齐宽度可变的子div

Question

如何证明具有固定宽度的父div中具有可变宽度的子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设置宽度。

Answer 1

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

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.child{
	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 +

Answer 2

将所有子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";
}

Answer 3

CSS Flex框可以完成这项工作，但您必须确保浏览器兼容性。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 此外，在使用flexbox之前，还有一些概念需要理解。最后，它可以解决许多CSS布局问题。

但是，您可能需要使用javascript动态调整元素大小。