Текст не выравнивается по правому краю - PullRequest
Новая
       19

Текст не выравнивается по правому краю

2 голосов
/ 11 июня 2019

Как мне разместить JAN 5 справа? Я хочу разместить div справа от левого контейнера.

Аналогично этому изображению:

enter image description here

см. Мой код: 

<!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-date">
            Jan <br />
            5
          </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>

/* 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-date {
  /* display: flex; */
  display: inline-block;
  /* 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;
}

Также ссылка на кодовый блок: https://codepen.io/peoray/pen/Rzwepm

Ответы [ 2 ]

4 голосов
/ 11 июня 2019

Поскольку ваш .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>

Посмотрите его на полной странице, и вы увидите, что он выровнен по правому краю.

1 голос
/ 11 июня 2019

См. Мой фрагмент кода: 

   
*,
*::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>
...