在 Gatsby 网页上水平排列图像和文本

Question

作为 uni 项目的一部分，我的团队需要为客户开发一个事件列表网页。我在 adobe illustrator 中模拟了一个客户喜欢的设计，并且在过去一天左右的时间里试图将模型转换为代码，以便它在网页上看起来与在 illustrator 中一样。我尝试了几种不同的列表布局方式，但如果我将它放在列表元素中，图像就会消失。

我正在使用 Gatsby 和基本插件

• gatsby-plugin-styled-components

const eventCalendar = () => {
  return (
    <Layout>
      <section className={styles.eventCalendar}>
        <li>
          <Image />
        </li>
        <ul>
          <ul>
            <li>29th Aug 2020</li>
            <li>5km - 100km</li>
          </ul>
          <ul>
            <li>BRIGHT RUNNING FESTIVAL</li>
          </ul>
          <ul>
            <li>Virtual</li>
          </ul>
          <button>Details</button>
        </ul>
      </section>
    </Layout>
  )
}

export default eventCalendar

.eventCalendar {
  width: 100%;
}

.eventCalendar ul {
  text-align: left;
}

.eventCalendar li {
  display: inline-block;
  font-size: 20px;
  padding: 12px;
}

.eventCalendar button {
  background: rgb(148, 88, 199);
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
  color: white;
  font-size: 24pt;
}

• gatsby-transformer-sharp
• gatsby-plugin-sharp
• gatsby-源文件系统

这就是模型的样子

这就是我能够编写的代码

这里是 JavaScript

import React from "react"
import Layout from "../components/Layout"
import Image from "../components/Images"
import styles from "../styles/event-calendar.module.css"

const eventCalendar = () => {
  return (
    <Layout>
      <section className={styles.eventCalendar}>
        <li>
          <Image />
        </li>
        <ul>
          <ul>
            <li>29th Aug 2020</li>
            <li>5km - 100km</li>
          </ul>
          <ul>
            <li>BRIGHT RUNNING FESTIVAL</li>
          </ul>
          <ul>
            <li>Virtual</li>
          </ul>
          <button>Details</button>
        </ul>
      </section>
    </Layout>
  )
}

export default eventCalendar

这里是 CSS

.eventCalendar {
  width: 100%;
}

.eventCalendar ul {
  text-align: left;
}

.eventCalendar li {
  display: inline-block;
  font-size: 20px;
  padding: 12px;
}

.eventCalendar button {
  background: rgb(148, 88, 199);
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
  color: white;
  font-size: 24pt;
}

Answer 1

Stackoverflow: How do I ask a good question? > How to create a Minimal, Reproducible Example

下一次，“清理”你的 Q（你的问题与 react/gatsby/gatsby-plugin-styled-components 并不真正相关 => 这是一个 pure CSS 布局问题）。

此外，您应该“修复”您的标记（您使用无效的nested lists HTML 标记。复制粘贴您的 HTML 她：https://validator.w3.org/#validate_by_input）。

之前

.eventCalendar {
  width: 100%;
}

.eventCalendar ul {
  text-align: left;
}

.eventCalendar li {
  display: inline-block;
  font-size: 20px;
  padding: 12px;
}

.eventCalendar button {
  background: rgb(148, 88, 199);
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
  color: white;
  font-size: 24pt;
}

<section>
  <li>
    <img src="https://picsum.photos/300/120" alt="thumb"/>
  </li>
  <ul class="eventCalendar">
    <ul>
      <li>29th Aug 2020</li>
      <li>5km - 100km</li>
    </ul>
    <ul>
      <li>BRIGHT RUNNING FESTIVAL</li>
    </ul>
    <ul>
      <li>Virtual</li>
    </ul>
    <button>Details</button>
  </ul>
</section>

之后

解决此问题的一种方法是通过flexbox。

.flex-wrapper{
  display: flex;
  width: 100%;
  border: 1px solid gray;
}

ul.eventCalendar{
  /* remove bullets */
  padding-left: 0px;
  list-style-type: none;
  /* nested flex grid */
  display: flex;
  flex-wrap: wrap;
}

.eventCalendar li{
  font-size: 14px;
  border: 1px solid gray;
}

.eventCalendar .date{
  flex-basis: auto;
  margin-right: 20px;
}

.eventCalendar .distance {
  flex-basis: auto;
}

.eventCalendar .name, .eventCalendar .location {
  flex-basis: 100%;
}

.thumb{
  padding: 7px;
}

.button_col{
  /* align the col to the right */
  margin-left: auto;
  /* v center the button */
  display: flex;
  align-items: center;
}

.btn {
  background: rgb(148, 88, 199);
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
  color: white;
  font-size: 24pt;
  min-width: 150px;
}

<section class="flex-wrapper">
  <div class="thumb">
    <img src="https://picsum.photos/200/121" alt="thumb"/>
  </div>
  <ul class="eventCalendar">
    <li class="date">29th Aug 2020</li>
    <li class="distance">5km - 100km</li>
    <li class="name"><h2>Event Name</h2></li>
    <li class="location">Location (Place, State)</li>    
  </ul>
  <div class="button_col">
    <button class="btn">Details</button>  
  </div>
</section>

*** 在小屏幕上添加媒体查询（以避免“破坏布局”）。 例如在移动设备上换行（换行到多行）。

/* MOBILE */
@media screen and (max-width: 992px) {
  .flex-wrapper{
    flex-wrap: wrap;
  }
}