时间戳

首页 > 解决方案 > 转换为一列布局时元素顺序不同的两列布局

html - 转换为一列布局时元素顺序不同的两列布局

问题描述

我正在尝试两个创建一个两列布局，如下所示：

两列

在较小的屏幕上会变成这样的单列布局：

在此处输入图像描述

它的棘手之处在于元素的顺序 - 我希望 A 和 B 在左右列中分别排在第一位，而在单列布局中分别排在第一位和第二位。

我已经设法使用以下代码通过 flex 布局获得了这样的结果：

<html>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .break {
            flex-basis: 100%;
            order: 0;
            height: 0;
            width: 0;
        }
        #wrapper {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 100%;
        }
        .block-wrapper {
            width: 50%;
        }
        .block-wrapper h1, .block-wrapper p {
            padding: 10px;
        }
        #a {
            order: -1;
            background-color: magenta;
        }
        #b {
            order: 1;
            background-color: red;
        }
        #c {
            order: -1;
            background-color: yellow;
        }
        #d {
            order: 1;
            background-color: orange;
        }
        @media screen and (max-width: 600px) {
            .block-wrapper {
                width: 100%;
            }
            #a, #b, #c, #d {
                order: 0;
            }
            .break {
                display: none;
            }
        }
    </style>
    <body>
        <div id="wrapper">
            <div id="a" class="block-wrapper">
                <h1>A</h1>
            </div>
            <div id="b" class="block-wrapper">
                <h1>B</h1>
                <p>lorem ipsum dolor</p>
                <p>amet</p>
            </div>
            <div class="break"></div>
            <div id="c" class="block-wrapper">
                <h1>C</h1>
                <p>lorem </p>
                <p>ipsum</p>
                <p>dolor</p>
            </div>
            <div id="d" class="block-wrapper">
                <h1>D</h1>
            </div>
        </div>
    </body>
</html>

（由于某种原因，当我将其作为代码片段放置时它不起作用，但它在另存为 HTML 文件并打开时就像在屏幕截图上一样工作）

这种方法的问题是它需要#wrapper设置高度，并且当元素无法适应高度时会中断（元素落在屏幕外）。这对我的情况不起作用，因为项目的内容将是动态的并且可能会变得很长（包含此布局的整个页面应该有一个垂直滚动条）。

是否有可能仅使用 CSS 获得这样的结果？你有什么想法？

标签： htmlcss

解决方案

更新：我最初的回答声称这不能单独使用 CSS 来完成。虽然这适用于一般的“砌体”情况，但在问题中最多只有两列的情况下，可以使用浮点数来完成。

这是使用未更改问题中的 HTML 的片段。您将需要一个 clear:both （如果需要在下一个内容之前清除两列）。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 80%;
  /* set for this test - obviously set to what is required */
}

.wrapper:nth-child(1) div:nth-child(n) {
  width: 50%;
}

.wrapper:nth-child(1) div:nth-child(odd) {
  float: left;
}

.wrapper:nth-child(1) div:nth-child(even) {
  float: right;
}

.a {
  background-color: magenta;
}

.b {
  background-color: red;
}

.c {
  background-color: yellow;
}

.d {
  background-color: orange;
}

@media screen and (max-width: 600px) {
  .wrapper {
    width: 100%;
  }
  .wrapper:nth-child(1) div:nth-child(n) {
    width: 100%;
  }
  .wrapper:nth-child(1) div:nth-child(odd) {
    float: left;
  }
  .wrapper:nth-child(1) div:nth-child(even) {
    float: left;
  }
}
<div class="wrapper">
  <div class="a">
    <h1>A</h1>
  </div>
  <div class="b">
    <h1>B</h1>
    <p>lorem ipsum dolor</p>
    <p>amet</p>
  </div>
  <div class="c">
    <h1>C</h1>
    <p>lorem </p>
    <p>ipsum</p>
    <p>dolor</p>
  </div>
  <div class="d">
    <h1>D</h1>
  </div>
</div>

有一个 CSS 网格的扩展，masonry，它可以处理超过 2 列。Firefox 有这个内置的，但你需要layout.css.grid-template-masonry-value.enabled在 about:config 的高级首选项中进行设置。请参阅MDN以及从那里指向Smashing Magazine中有关此功能的有用描述的链接

推荐阅读