javascript - 2 列布局，直到第一个列高度完成，然后是一列布局

Question

我的网页有 2 栏布局，左侧是过滤器，右侧是文章，如下所示:

目标:

• 固定宽度过滤器(左侧)@大视口(viewport)
• 文章上方的全宽过滤器(一列布局)@小视口(viewport)
• @ 大视口(viewport)在右侧堆叠文章，直到到达第一列的高度末端，然后是全宽文章，如下所示:

我目前正在使用 JS getBoundingClientRect() 执行此操作，但很想知道是否有 CSS 解决方案？!

根据要求，通过 SvelteKit 提供当前 JS 解决方案:

import {
  onMount
} from 'svelte';
import type {
  PageData
} from './$types'
import Source from '$lib/components/Source.svelte'
import type {
  QuoteCategory
} from '$lib/util/types'
import AuthorChips from '$lib/components/chips/AuthorChips.svelte'
import QuoteCategoryChips from '$lib/components/chips/QuoteCategoryChips.svelte'

export let data: PageData
let categories: QuoteCategory[]
if (data.categories) categories = data.categories

onMount(fullSizeSources)

function fullSizeSources() {
  let wideDone = false
  const scrollTop = document.documentElement.scrollTop
  const authors = document.getElementById('author-chips')
  const sources = document.getElementsByClassName('source')
  const authorBottom = (authors ? .getBoundingClientRect() ? .bottom || 0) + scrollTop

  for (let source of sources) {
    if (wideDone || (source.getBoundingClientRect().top + scrollTop) > authorBottom) {
      wideDone = true
      source.classList.add('full')
    } else {
      source.classList.remove('full')
    }
  }
}

.wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .left {
    max-width: 36rem;
    margin-right: 1.8rem;
    display: flex;
    flex-direction: column;
  }
   :global(.source.full) {
    margin-left: -37rem;
    width: calc(100% + 37rem);
  }
}

<div class="wrapper">
  <div class="left">
    { #if data.categories }
    <QuoteCategoryChips categories={ data.categories } location="nav" /> { /if } { #if data.authors }
    <AuthorChips authors={ data.authors } /> { /if }
  </div>

  <div>
    { #if data.sources } { #each data.sources as source }
    <Source { source } /> { /each } { /if }
  </div>
</div>

Answer 1

如果我理解正确的话，你可以通过使用 float 和 @media 来解决这个问题。对于小视口(viewport)，请使用一列的正常布局。对于大视口(viewport)，您可以使用 float: left; ，这样您的文章就位于右侧，并且在达到左列的高度后，它们的宽度变为 100%。

/* Just some styles to visualise. Notice the use of flex, it makes it easier to work with the content of these elements */

.left,
.right-article {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid blue;
}


/* Replace 600px with whatever you need */

@media (min-width: 600px) {
  .left {
    /* Replace the width with whatever you need */
    width: 300px;
    float: left;
  }
}

<div>
  <div class="left">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
    <p>Exercitationem et qui fuga non illo nemo, harum ab, vero in illum maxime, dolore dignissimos velit provident id iure accusantium fugiat amet!</p>
  </div>

  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>

  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit..</div>

  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>

  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit..</div>

  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>

  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit..</div>

  <div class="right-article">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
</div>