Выровнять текст по нижнему элементу div - PullRequest
Новая
       7

Выровнять текст по нижнему элементу div

0 голосов
/ 27 апреля 2018

Ссылка на проект

Мне наконец-то удалось получить макет заголовка, который я хочу, но одна вещь, которую я не могу сделать, это выравнивание текста (h2 и h3) в левой боковой панели. Я пытался сделать это с фиксированной пропорцией, но у него были побочные эффекты, и я думаю, что это как-то связано с повернутым текстом.

Основной заголовок должен быть слева внизу, на одной строке, а дата должна быть справа от основного заголовка, также на одной строке. Объединенные элементы должны быть выровнены по центру бокового основного текста по левому краю.

Редактировать: Ссылка на макет 

* {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.wrapper-header {
  display: flex;
  background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}

.top-nav {
  position: fixed;
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, .2);
}

.side-main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  margin-top: 60px;
  width: 70px;
  border-right: 1px rgba(255, 255, 255, .2) solid;
}

.agenda-text {
  width: 100%;
  color: #FFF;
  transform: rotate(-90deg);
  text-transform: uppercase;
}

.header-main {
  display: flex;
  height: calc(100vh - 60px);
  margin-top: 60px;
}
<html>

<head>
  <title>Rataplan Improvisatietheater</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="top-nav">
    nav
  </div>
  <div class="wrapper-header">
    <div class="side-main">
      <h2 class="agenda-text">Main Title Event</h2>
      <h3 class="agenda-text">Event date 1 (month) 2018</h3>
    </div>
    <div class="header-main">
      main
    </div>
  </div>
  <div class="wrapper-content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
  </div>
</body>

</html>

Большое спасибо заранее!

Надеюсь, вы поможете мне.

С уважением, Джейсон

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

В целом это пока не выглядит супер отполированным, но я считаю, что это решит вашу проблему с поворотом side-main.

Html: 

<!DOCTYPE html>
<html>
    <head>
        <title>Rataplan Improvisatietheater</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="top-nav">
            nav
        </div>
        <div class="wrapper-header">
          <div class="side-main-wrapper">

            <div class="side-main">
              <h2 class="agenda-text">Main Title Event</h2>
              <h3 class="agenda-text">Event date 1 (month) 2018</h3>
            </div>
          </div>
          <div class="header-main">
                main
          </div>
        </div>
        <div class="wrapper-content">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
        </div>
    </body>
</html>

Css: 

*{
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header{
    display: flex;
    background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav{
  position: fixed;
  width: 100%;
  height: 60px;
  background: rgba(255,255,255,.2);
}
.side-main-wrapper {
  transform: rotate(-90deg);
  margin-top: 60px;
}
.side-main{
    display: flex;
    flex-direction: column;
    height: 70px;
    width: calc(100vh - 60px);
    border-bottom: 1px rgba(255,255,255,.2) solid;
}
.agenda-text{
    color: #FFF;
    text-transform: uppercase;
}

.header-main{
    height: calc(100vh - 60px);
    margin-top: 60px;
}

Вместо того, чтобы вращать записи гибкого столбца, я обернул side-main в side-main-wrapper и повернул его. Затем я обработал side-main как обычный столбец flex, и он начал себя вести.

0 голосов
/ 27 апреля 2018

Я добавил flex: 1; и немного margin-left к .agenda-text, а затем немного увеличил ширину .side-main. Надеюсь, это что-то вроде того, что вы ищете, но просто угадаю, так как вы не указали

Редактировать : выглядит дрянно в предварительном просмотре и в полноэкранном режиме ... но работает в реальном окне редактирования jsfiddle ... возможно, это не очень хороший ответ

Редактировать Вынул flex: 1 и поле слева. Я сделал так, как вы описали, но с проблемой. Я думаю, что большой шаг вперед - это добавить контейнер вокруг .agenda-текстов, а затем повернуть его вместо текста. Проблема с моим подходом заключается в том, что гибкое позиционирование основывается на ширине боковой панели, прежде чем все будет повернуто вбок. Таким образом, с шириной левой полосы, например, 300 пикселей, она работает, но с меньшей шириной, как вы, вероятно, ищете. Не могу представить, чтобы сделать это полностью отзывчивым, не выполнив все это за 

* {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.wrapper-header {
  display: flex;
  background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}

.top-nav {
  position: fixed;
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, .2);
}

.side-main {
  height: calc(100vh - 60px);
  margin-top: 60px;
  width: 300px;
  border-right: 1px rgba(255, 255, 255, .2) solid;
}

.side-main-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform: rotate(-90deg);
}

.agenda-text {
  color: #FFF;
  text-transform: uppercase;
}

.header-main {
  display: flex;
  height: calc(100vh - 60px);
  margin-top: 60px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Rataplan Improvisatietheater</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="top-nav">
    nav
  </div>
  <div class="wrapper-header">
    <div class="side-main">
      <div class="side-main-title">
        <h2 class="agenda-text">Main Title Event</h2>
        <h3 class="agenda-text">Event date 1 (month) 2018</h3>
      </div>
    </div>
    <div class="header-main">
      main
    </div>
  </div>
  <div class="wrapper-content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...