css - 如何使用 css 和 html 构建 3 个相互堆叠的盒子

标签 css overlays

我正在尝试使用 css 对彼此成比例的 3 个框进行编码。

例如:盒子 1 更大,在 bix 里面是盒子 2,盒子 2 更小,但在盒子 1 内居中。盒子 3 在盒子 2 里面,它也在盒子 2 内按比例居中。所以盒子 1 > 盒子 2 >方框 3. 像这样的……

但无论何时我这样做,方框 2 和方框 3 都没有真正按照我希望的方式居中。

代码:

<body>
<div id="wrapper">
    <div class="Box1">
        <div class="Box2">
            <div class="Box3"></div>
        </div>
    </div>
    <!--- End Of Center-Wrapper --->
</div>
<!--- End Of Wrapper --->
</body>

JsFiddle:http://jsfiddle.net/mcquaye/mxtCs/

最佳答案

给 box2 和 box3 添加 margin auto

.box2{margin:auto;}
.box3{margin:auto;}

关于css - 如何使用 css 和 html 构建 3 个相互堆叠的盒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17212443/

相关文章:

html - 定位特定元素,如果它包含另一个仅使用 CSS 的元素

javascript - div 覆盖数组中的每个 div

c++ - OpenCv 用透明度覆盖两个 Mat(绘图而不是图像)

html - 单击元素时父元素的事件状态

javascript - 在 mousemove 上淡出后 Div 重新出现

php - 需要一个正则表达式来用左代替右,右代替左

html - Bootstrap 布局在一行内具有可变高度的列内容,并将它们正确地包装在不同的屏幕上

ios - Objective-C 如何从与当前 View 重叠的选项卡栏中呈现操作表?

iOS:在 iPhone 相机预览上叠加

c++ - 根据状态在不同文件上叠加图标