Как я могу сделать свои html текстовые контейнеры более отзывчивыми? - PullRequest
Новая
       72

Как я могу сделать свои html текстовые контейнеры более отзывчивыми?

0 голосов
/ 20 апреля 2020

Мой сайт выглядит так:

DESKTOP:

Desktop

MOBILE: Mobile

Однако мне нужно, чтобы текст был встроен в середину соответствующего изображения (оба элемента были отцентрированы, чтобы подтекст не был отцентрирован).

My HTML: 

<div class="col-lg-3>
<div class="container--wrap">
        <div class="inward-text">
          <br>
          <img src="green-up.png" class="center" style="vertical-align: middle;">
          <br>
          <span style="color: #9BDDB4; font-family: robotobold; font-size: 30px; vertical-align: middle;" "="">4.51%</span>
          <br>
          <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
          <img src="red-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
          <br>
          <br>
          <br>
          <br>
          <div id="txtdown">
            <span style="color: #EE939C; font-family: robotobold; font-size: 30px; vertical-align: middle;">1.80%</span>
            <br>
            <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
          </div>
          <img src="flag-ic.png" class="center" style="padding-top: 30px; vertical-align: middle;">
          <br>
          <br>
          <br>
          <div id="txtdown">
            <span style="color: #AEAEAE; font-family: robotobold; font-size: 30px; vertical-align: middle;">text</span>
            <br>
            <span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">subtext</span>
          </div>

        </div>

      </div>
</div>

Соответствует CSS: 

.container--wrap {
      background-color: #000000;
      border-radius: 15px;
      margin: 5px;
      overflow: hidden;
}
.col-lg-3 {
      flex: 0 0 25%;
      max-width: 25%;
}
.col {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
}
.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 135px;
}
.inward-text span{
      display: inline;
      margin-left: 10px;
}
.inward-text img{
      margin-left: 80px;
      float: left;
}
#txtdown{
      margin-top: 10px;
}

Как мне делать то, что я хочу делать?

РЕДАКТИРОВАТЬ:

New

Я заранее прошу прощения за чрезвычайно грязные <br> s, которые есть!

Ответы [ 3 ]

0 голосов
/ 20 апреля 2020

Шаг 1

Удалите все встроенные стили из каждого элемента и поместите их в CSS как классы по следующим строкам: 

.percent {
  color: #EE939C;
  font-family: robotobold;
  font-size: 30px;
  vertical-align: middle;
}

.detail {
  color: #ffffff;
  font-family: robotolight;
  font-weight: lighter;
  font-size: 15px;
}

Шаг 2

Удалить все <br/> s

Шаг 3

Завернуть каждый элемент как следующую разметку 

<div class="fancy-item"> <!-- your group -->
  <img ...>
  <div> <!-- flexbox sub-group -->
    <span class="percent">1.80%</span>
    <span class="detail">from yesterday</span>
  </div>
</div>

Добавьте остаток вашего CSS: 

.fancy-item {
  display: flex;
  align-items: center;
}

Шаг 4

Добавьте немного нижнего поля к .percent или верхнего поля к .detail, если вы хотите их установить немного врозь.

Готово!

Примечание: Вам не нужно использовать имена моих классов, используйте то, что имеет смысл в вашем контексте.

Еще одно примечание: Шаги 1-3 являются наиболее важными. Они позволяют вам менять все элементы одновременно, если вам не нравятся конкретные детали, без необходимости go просматривать каждый из них и вносить изменения. DRY - один из важнейших принципов программирования.

0 голосов
/ 20 апреля 2020

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

<div class="items">
    <div class="item red">
        <img/>
        <div class="item__text">
            <span class="percent"></span>
            <span class="description"></span>
        </div>
    </div>

    <div class="item green">
        <img/>
        <div class="item__text">
            <span class="percent"></span>
            <span class="description"></span>
        </div>
    </div>

    <div class="item grey">
        <img/>
        <div class="item__text">
            <span class="percent"></span>
            <span class="description"></span>
        </div>
    </div>
</div>

CSS

.items {
   display: flex;
   flex-direction: column;
}

.item {
   display: flex;
   align-items: center;
}

.item__text {
   display: flex;
   flex-direction: column;
}

И не используйте be, используйте margin или padding, это более гибкий и надежный подход.

0 голосов
/ 20 апреля 2020

Html: 

<div class="container--wrap">
      <div class="inward-text">
          <div class="flex">
              <img src="green-up.png" class="center" style="vertical-align: middle;">
              <div id="txtdown">
                  <span style="color: #9BDDB4; font-size: 30px; vertical-align: middle;">4.51%</span>
                  <span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
              </div>
          </div>
          <div class="flex">
              <img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
              <div id="txtdown">
                  <span style="color: #EE939C; font-size: 30px; vertical-align: middle;">1.80%</span>
                  <span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
              </div>
          </div>
          <div class="flex">
              <img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
              <div id="txtdown">
                  <span style="color: #AEAEAE; font-size: 30px; vertical-align: middle;">text</span>
                  <span style="color: #ffffff; font-weight: lighter; font-size: 15px">subtext</span>
              </div>
          </div>
      </div>
  </div>

Css: 

.container--wrap {
   background-color: #000000;
   border-radius: 15px;
   margin: 5px;
   overflow: hidden;
}

.flex {
   display: flex;
}

.col-lg-3 {
   flex: 0 0 25%;
   max-width: 25%;
}

.col {
   flex-basis: 0;
   flex-grow: 1;
   max-width: 100%;
}

.inward-text span {
   display: inline;
   margin-left: 10px;
}

#txtdown {
   margin-top: 10px;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}
...