Question

我的博客上面有封面照片（A）和帖子（B）。当页面变得比高大时，我希望帖子显示在封面照片的左侧。有没有办法在保持宽度的同时采用div B并将其与A和左边的内部对齐？

高视图

--------------------
|        A         |
--------------------
--------
|  B   |
--------

广泛的视野

-------- --------------------
|  B   | |        A         |
-------- --------------------

此处是指向index.html和css的链接。我正在使用jekyll所以有些东西包含在其他地方，但重要的是这两个文件中的内容

Answer 1

您可以使用媒体查询来更改元素设置。要按大小放置它们并更改顺序，您可以在其容器上使用flexbox，并为每个项目分配其订单号（fiddle）：

HTML布局：

<div class="container">
    <div class="coverImage"></div>
    <div class="posts"></div>
</div>

CSS：

.coverImage {
    max-width: 400px; /** set max width so div won't be 100% **/
}

.posts {
    max-width: 400px; /** set max width so div won't be 100% **/
}

@media (min-width: 800px) and (orientation: landscape) {
    .container {
        display: flex;
    }

    .coverImage, .posts {
        flex: 1;
    }

    .coverImage {
        order: 2;
    }

    .posts {
        order: 1;
    }
}

将div移到另一个div的上方和右侧

1 个答案: