Question

如何将604800^2放在右侧？我想将ON放在左侧容器的右侧。

类似于此图片：

查看我的代码：

JAN 5

div

还有一个codepen链接：https://codepen.io/peoray/pen/Rzwepm

Answer 1

由于您的.event已经弯曲，因此您也可以将.event-date包装到另一个div上，并使用display:flex;和justify-content:flex-end;
在下面的代码片段中，我将您的<div class="event-date">用另一个具有div类的event-right包装。

/* Base reset styles */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
}

.section-ticket {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}

.left {
  background-color: red;
  padding: 5.9rem 5.4rem 6.5rem 10rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* position: relative; */
}

.right {
  background-color: blue;
  padding: 9.1rem 10rem 19.4rem 5.9rem;
}

.left-button {
  background: #f5f5f5;
  padding: 0.4rem 3rem;
  font-size: 2rem;
  cursor: pointer;
  border: none;
  outline: none;
  margin-bottom: 8.3rem;
}

.event {
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: flex-start; */
  /* width: 100%; */
}
.event-right{
  display:flex;
  justify-content:flex-end;
}
.event-date {
  /* display: flex; */

  /* justify-content: flex-end; */
  /* position: absolute; */
  /* width: 100%; */
  text-align: center;
  text-transform: uppercase;
  font-size: 2.5rem;
  padding: 1rem 2.4rem;
  background-color: #ffbb00;
  box-shadow: 0 0 1.3rem rgba(0, 0, 0, 0.016);
  margin-bottom: 2.3rem;
}

.event h2 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  font-family: 'Helvetica';
}

.event p {
  font-size: 2rem;
  margin-bottom: 13.8rem;
}

.share {
  font-size: 2rem;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="ticket.css" />
    <title>Document</title>
  </head>
  <body>
    <section class="section-ticket">
      <div class="left">
        <button class="left-button">Back</button>
        <div class="event">
          <div class="event-right">
          <div class="event-date">
            Jan <br />
            5
          </div>
          </div>
          <h2>Soundcity MVP Award Festival</h2>
          <h2>Eko Hotel, Victorial Island Lagos</h2>
          <p>
            Event description goes here and more description for other things
            goes here and more and more so I cant say them all.
          </p>
        </div>
        <div class="share">
          <p>Share Event</p>
          <i class="fas fas-facebook"></i>
        </div>
      </div>

      <div class="right">
        <div>
          <h1>Hello</h1>
        </div>
      </div>
    </section>
  </body>
</html>

在整页中查看它，您会看到它正确对齐。

Answer 2

查看我的代码段：

   /* Base reset styles */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
}

.section-ticket {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}

.left {
  background-color: red;
  padding: 5.9rem 5.4rem 6.5rem 10rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* position: relative; */
}

.right {
  background-color: blue;
  padding: 9.1rem 10rem 19.4rem 5.9rem;
}

.left-button {
  background: #f5f5f5;
  padding: 0.4rem 3rem;
  font-size: 2rem;
  cursor: pointer;
  border: none;
  outline: none;
  margin-bottom: 8.3rem;
}

.event {
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: flex-start; */
  /* width: 100%; */
}
.event-right{
  display:flex;
  justify-content:flex-end;
}
.event-date {
  /* display: flex; */

  /* justify-content: flex-end; */
  /* position: absolute; */
  /* width: 100%; */
  text-align: center;
  text-transform: uppercase;
  font-size: 2.5rem;
  padding: 1rem 2.4rem;
  background-color: #ffbb00;
  box-shadow: 0 0 1.3rem rgba(0, 0, 0, 0.016);
  margin-bottom: 2.3rem;
}

.event h2 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  font-family: 'Helvetica';
}

.event p {
  font-size: 2rem;
  margin-bottom: 13.8rem;
}

.share {
  font-size: 2rem;
}

   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="ticket.css" />
    <title>Document</title>
  </head>
  <body>
    <section class="section-ticket">
      <div class="left">
        <button class="left-button">Back</button>
        <div class="event">
          <div class="event-right">
          <div class="event-date">
            Jan <br />
            5
          </div>
          </div>
          <h2>Soundcity MVP Award Festival</h2>
          <h2>Eko Hotel, Victorial Island Lagos</h2>
          <p>
            Event description goes here and more description for other things
            goes here and more and more so I cant say them all.
          </p>
        </div>
        <div class="share">
          <p>Share Event</p>
          <i class="fas fas-facebook"></i>
        </div>
      </div>

      <div class="right">
        <div>
          <h1>Hello</h1>
        </div>
      </div>
    </section>
  </body>
</html>

文字右对齐

2 个答案: