Question

我喜欢为网络完成以下水平布局，用户将使用水平滚动而不是垂直滚动。

源代码类似于以下内容：

<html>
<head><title>Sample</title></head>
<body>
<main>
  <section class="cover"></section>
  <section>
    <h1>Title</h1>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
    </div>
</section>
<section>
   <h2>Page2</h2>
   <img src="someimage.jpg" alt="Some Title">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
</section>
</main>
</body>
</html>

我认为通过设置主要display : flex会很容易，因为我不知道会有多少列，所以我只会设置section p column-width : 600px。我希望该部分的容器可以获得所需的宽度，但它不起作用。而不是容器变大，取决于垂直流量内容，它仍然很小，因为它将低于600px，将只有一列，其余的内容流下来。

我喜欢容器，用户可以使用尽可能多的列来显示内容，并且它的父容器在宽度上增长，以保存内容。

Answer 1

您可以在Flex容器上设置固定height，并将flex-direction: column与flex-wrap: wrap

一起使用

main {
  display: flex;
  height: 400px;
  flex-direction: column;
  flex-wrap: wrap;
}
.content {
  display: flex;
}
.content p {
  flex: 1;
  margin: 20px;
}

<main>
  <section class="cover"></section>
  <section>
    <h1>Title</h1>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat
        massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit
        laoreet semper ut placerat eros.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat
        massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit
        laoreet semper ut placerat eros.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat
        massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit
        laoreet semper ut placerat eros.</p>
    </div>
  </section>
  <section>
    <h2>Page2</h2>
    <div class="content">
      <img src="http://placehold.it/350x350">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat
        massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit
        laoreet semper ut placerat eros.</p>
    </div>
  </section>
</main>

如何使柔性盒与垂直流动一起工作？

1 个答案: