Flexbox стилизация текста выноски - PullRequest
Новая
       12

Flexbox стилизация текста выноски

0 голосов
/ 18 марта 2019

Я пытаюсь оформить текст выноски с помощью Flexbox.

Надеюсь, следующие слова могут описать визуальное намерение.

У меня есть мобильный макет, который будет постом в блоге..

Типичный текст - это просто стандартный стиль.

Для определенных частей текста (возможно, важный абзац) я хочу стилизовать это по-другому - я называю этот стиль "выноска"

Я хочу, чтобы этот стиль имел тонкую синюю вертикальную линию (около 10 пикселей) - вровень с левой стороной.

Затем справа от этой тонкой синей линии я хочу текст выноски, которыйбыть немного в другом стиле.

Вертикальная высота синей линии будет равна высоте сопровождающего текста выноски.

У меня есть пример моего наилучшего усилия, см. ссылку на кодовый блок (что выглядит ужасно).Он содержит несколько комментариев в примере, которые, я надеюсь, прояснят мои намерения.

https://codepen.io/snowman8003/pen/vPrEzJ

Ниже приведена копия соответствующего стиля флекс CSS: 

div .call-out {
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: nowrap;
justify-content:space-evenly;
}

div .call-out-bar {
flex: 1;
width: 10px;
background: blue;
}

div .call-out-text {
flex: 1;
width: 100%;
}

Изображение ниже.Надеюсь, все прояснится.

This is an image of what I am basically trying to achieve:

Спасибо за любой вклад,

Mark

Ответы [ 2 ]

1 голос
/ 18 марта 2019

padding-left должно сработать!

РЕДАКТИРОВАТЬ: Как упоминалось @arieljuod, <em> также может быть использован.Таким образом, 2 <div> больше не нужны.

.call-out-text {
  flex 1;
  width: 100%;

  padding-left: 10px;
  border-left: 5px solid blue;
}

// EDIT
em {
  padding-left: 10px;
  border-left: 5px solid blue;
}


html, body {
 /*  https://material.io/design/typography/the-type-system.html# */
/* light: 300; regular: 400; medium: 500*/

  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  font-weight: normal;

/*  this sets 1rem = 16px*/
  font-size: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  height: 100%;
/*  border:1px solid rgba(250,0,0,1);*/
}

p {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.5px;
}

div .call-out {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content:space-evenly;
  
}

em {
  padding-left: 10px;
  border-left: 5px solid blue;
}

.call-out-text {
  flex 1;
  width: 100%;
  
  padding-left: 10px;
  border-left: 5px solid blue;
}
<head>
  <meta charset="UTF-8">
  <title>FlexBox Nav</title>

  <!-- light: 300; regular: 400; medium: 500 -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>

<div class="wrap">
  <article>
    <p>ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, beatae?</p>

    
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <!-- EDIT -->
    <em>Qwerty!</em>
    
    <!-- Original option -->
    <div class="call-out">
      <div class="call-out-text">
        <p><i>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</i></p>
      </div>
    </div>

    <p>Now we are back to normal text...</p>
  </article>
</div>
0 голосов
/ 18 марта 2019

Похоже, что вы можете добиться этого, используя только CSS (border-left и padding-left). Есть ли причина использовать этот гибкий хак?И я бы порекомендовал вам использовать тег «EM», используемый для выделения частей текста, он будет семантически лучше. 

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

<p><em>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</em></p>

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

А затем только отступы и границы 

p em {
  padding-left: 10px;
  border-left: 10px solid blue;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

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

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

...