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

问题描述

作为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,199,1) 0%,rgba(92,62,183,1) 100%
  );
  color: white;
  font-size: 24pt;
}

• gatsby-transformer-sharp
• gatsby-plugin-sharp
• gatsby-source-filesystem

这是模型的外观

这就是我能够编写的代码

这是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,1) 100%
  );
  color: white;
  font-size: 24pt;
}

解决方法

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,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,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;
  }
}