如何在HTML中执行此div

Question

有一个大布局的一部分 - div由3个div组成，那么当你缩小页面时如何将它们放在彼此之下？ Tnx观看！

Answer 1

这是使用浮点数和媒体查询的基本方法：http://jsfiddle.net/8x5xchps/。 （调整屏幕大小以查看堆叠顺序中的更改）。

HTML：

<div id = "wrapper">
    <div></div>
    <div></div>
    <div></div>
</div>

<p>Sample paragraph</p>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

#wrapper > div {
    width: calc(100% / 3);
    float: left;
    height: 200px;
}

#wrapper > div:first-of-type {
    background-color: rgba(255, 0, 0, 0.5);
}

#wrapper > div:nth-of-type(2) {
    background-color: rgba(0, 255, 0, 0.5);
}

#wrapper > div:nth-of-type(3) {
    background-color: rgba(0, 0, 255, 0.5);
}

@media screen and (max-width: 500px) {
    #wrapper > div {
        float: none;
        width: auto;
    }
}