Question

我想做的是不让孩子适合父母，不希望孩子做出回应，我只希望父母适合孩子固定的width，然后适当地居中

我想做的是：

一个小部件，无论内部内容如何，都可以居中，因此，如果如果有10个静止图像居中，则有5个孩子居中显示

我正试图通过动态创建的div子级来创建“响应式” div，而将其作为absolute子级，因为它们需要稍微重叠一些

问题是，将孩子放在absolute上时，父母似乎根本没有发现他们的孩子

我知道这在某种程度上是可能的，因为当使用overflow时，父母会以某种方式知道整体width

有什么方法可以使外部父母div的{{1}}等于孩子的总数width？

一直在搜索所有该死的早晨，回顾了很多问题，但似乎都没有答案。我知道，这肯定不是更好的方法，并且很感谢其他方法的帮助

我所拥有的：

width

.grandparent{ position: absolute; width: 100%; height: 50%; bottom: 0; border: solid; }

.parent { position: absolute; width: 90%; height: 85%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }

.child { position: absolute; width: 100px; height: 150px; border: blue solid; }

无论内部内容如何，我都想将父母（红色正方形）水平居中，因为孩子的数量可能会有所不同

Answer 1

我终于找到了解决方案，而没有从子元素中删除absolute位置！

使用overflow通过scrollWidth

获得孩子的总宽度

var A = document.getElementById('parent').scrollWidth

知道了parent's div的真实宽度之后，我便可以将其正确居中，而不会出现其他问题

$('#parent').width(A);或document.getElementById('parent').style.width = A + "px";

工作片段

var parent = document.getElementById('parent');

parent.style.width = parent.scrollWidth + "px";

var parent2 = document.getElementById('parent2');

parent2.style.width = parent2.scrollWidth + "px";

.body { height: 500px;}    

.grandparent{ position: absolute; width: 100%; height: 200px; top: 0; border: solid; }

.parent { position: absolute; height: 100%; overflow: visible; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }

.child { position: absolute; width: 100px; height: 150px; border: blue solid; }

.grandparent2{ position: absolute; width: 100%; height: 200px; top: 200px; border: solid; }

.parent2 { position: absolute; height: 200px; overflow: visible; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }

.h41, .h42 { position: absolute; left:20px; }
.h41 { top: 20px; }
.h42 { top: 220px;}

<h4 class="h41">Centered with 5 Childs</h4>
<div class="grandparent">
    <div id="parent" class="parent">
        <div class="child" style="transform: translate(0em, 16px) rotateZ(-20deg) rotateY(0deg);"></div>
        <div class="child" style="transform: translate(3.6em, 21px) rotateZ(-10deg) rotateY(0deg);"></div>
        <div class="child" style="transform: translate(7.2em, 25px) rotateZ(0deg) rotateY(0deg);"></div>
        <div class="child" style="transform: translate(11em, 21px) rotateZ(10deg) rotateY(0deg);"></div>
        <div class="child" style="transform: translate(15.2em, 25px) rotateZ(20deg) rotateY(0deg);"></div>
    </div>
</div>
<h4 class="h42">Centered with 2 Childs</h4>
<div class="grandparent2">
    <div id="parent2" class="parent2">
        <div class="child" style="transform: translate(0em, 16px) rotateZ(-10deg) rotateY(0deg);"></div>
        <div class="child" style="transform: translate(5em, 21px) rotateZ(10deg) rotateY(0deg);"></div>
    </div>
</div>

使绝对父Div宽度等于绝对子Div的总宽度

1 个答案: