Question

我有3个div元素，我想放在2列中。我想其中一个垂直填充第一列，而其他两个则填充第二列分开的行。（运行代码段以查看各节）

.news-feed {
  display: flex;
  flex-flow: row wrap;
}
.image {
  flex-direction: column;
  height: 20px;
}
.title_date {
  flex-direction: column;
}
.job-description {
  flex-direction: column;
}

<section class="news-feed">
    <section class="image">
        <img src= 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA'/>
    </section>
    <section class="title_date">
        <p class="date">27 Dec 1997</p>
        <h3 class="title">Urgent Job offer</h3>
    </section>
    <section class="job_description">
        <p class="job_info">This is a job for speacial people like you. Long text bla bla bla. The main issue is that I cannot put the 'title_date' and 'job_description' section in a single div because I want to put the 'title_date' at top of 'image' section when the device is mobile. Any workaround idea is highly appreciated. Thanks</p>
        <p class="tags">Jobs, HighPay, Carrer</p>
    </section>
</section>

主要问题是我无法在单个div中放置“ title_date”和“ job_description”部分，因为我希望在移动设备时将“ title_date”放置在“ image”部分的顶部。任何解决方法的想法都受到高度赞赏。谢谢

Answer 1

如果仅在CSS文件中使用grid not flex，则可以轻松实现。然后，您将不需要任何JavaScript。只需像这样更改您的CSS代码：

    .news-feed {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 50% 50%;
        grid-template-areas: 
            "image title_date"
            "image job_description"
    }
    .image {
          grid-area: image;
    }
    .title_date {
          grid-area: title_date;
    }
    .job-description {
          grid-area: job_description;
    }
    @media screen and (max-width: 425px) {
        .news-feed {
            grid-template-columns: 100%;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 
                "title_date"
                "image"
                "job_description"
        }
    }

这将在桌面模式下将图像放置在左侧，而在移动版本上将图像放置在中间。当然，您可以根据需要更改列和行的高度和宽度。

Answer 2

将“ title_date”和“ job_description”包装在一个部分中，并给它们弹性方向：列；在包装div内给出flex-direction：row; CSS到这两个div的“ title_date”和“ job_description”

Answer 3

我必须采用JavaScript方式来解决此问题。

为此，我查看“ window.innerheight”属性，并根据该属性，将“ title_date”和“ job_description”包装在新部分中（用于正常显示），或者将它们分开并给它们提供所需的flexbox排序（用于移动显示）。

使用flexbox对齐3个元素

3 个答案: