Question

我希望内部div left和right始终以包装div为中心，当设备屏幕小于600像素时，{{1内部div要低于right内部div。

我已经多次尝试解决这个问题，但无济于事。我的所有代码都在jsfiddle：

这是我的HTML代码：

left

这是我的css代码：

<div id="wrap">
    <div id="left">
        <span>
            <img
                class="wp-image-440 size-medium aligncenter"
                src="http://www.generalgreenestudios.com/wp-content/uploads/2015/09/danielgreene-circle-300x300.png"
                alt="Daniel Greene"
                width="200"
                height="200" />
        </span>

        <span class="about-desc">
            <p style="text-align: center;">
                <strong>Daniel Greene</strong>
            </p>
            <p style="text-align: center;">
                Cinematographer/Editor
            </p>

            <hr style="border-color: #333333;" />
            <p style="text-align: justify;">
                Text here
            </p>
        </span>
    </div>

    <div id="right">
        <span>
            <img
                class="wp-image-435 size-medium aligncenter"
                src="http://www.generalgreenestudios.com/wp-content/uploads/2015/09/alexandriagreene-circle-300x300.png"
                alt="Alexandria Greene"
                width="200"
                height="200" />
        </span>

        <span class="about-desc">
            <p style="text-align: center;">
                <strong>Alexandria Greene</strong>
            </p>
            <p style="text-align: center;">
                Accounts/Client Relations
            </p>

            <hr style="border-color: #333333;" />
            <p style="text-align: justify;">
                Some text goes here
            </p>
        </span>

    </div>
</div>

Answer 1

尝试使用flex-direction

更新小提琴：https://jsfiddle.net/vdwz3csp/7/

#wrap {
    display: flex;
    justify-content: center;
    flex-direction:row;
    width: 100%;
}
#left, #right {
    padding: 20px;
    width:25%;
    min-width:300px;
}
@media screen and (max-width: 600px) {
    #wrap
    {
        flex-direction:column;
    }
}

Answer 2

在移动设备查询中，只需将display的{{1}} #wrap与flex block交换为https://jsfiddle.net/vdwz3csp/8/

响应式网页设计：内部DIV在包装DIV中 - 希望内部DIV在移动设备上叠加在一起

2 个答案: