Вопрос по css3, html, css, flexbox – Выравнивание трех элементов (слева / по центру / справа) внутри контейнера

3

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

Я также хотел бы использовать тот же код для создания полноразмерного баннера с двумя внутренними встроенными элементами. Левая обратная ссылка и центральный логотип.

То, что я до сих пор, это:

HTML

 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

SCSS:

#header-blue {
  width: 100%;
  margin-bottom: 50px;
  height: auto;
  background-color: $primary-blue;
  color: #fff;

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
  }
  .header-center {
    border: 1px solid red;
    margin: 0 auto !important;
    display: inline-block;
    width: 100px;
  }

} // header-blue

Я ищу решение, которое широко поддерживается, так что я не уверен, что эти правила изгибаются?

Результат таков:FIDDLE

РЕДАКТИРОВАТЬ:ОКОНЧАТЕЛЬНЫЙ ПРАВИЛЬНЫЙ ДИЗАЙН, КОГДА ПОЛНЫЙ

Отказ от ответственности: Пожалуйста, поймите, что, хотя это может рассматриваться как «дубликат» поста, после нескольких часов онлайн-исследований и проб и ошибок я все еще не прогрессировал. Поэтому я хотел бы обратиться за помощью к этой проблеме и учиться в процессе.

Образ чегоТЫ ХОЧЕШЬ при условии будет лучше Yash Jain

Ваш Ответ

4   ответа
0

нииdisplay: table;

Позвольте мне немного поиграться с этим и вернуться к вам - я просто работал над чем-то похожим вчера.

РЕДАКТИРОВАТЬ 1: На первый взгляд, я бы посоветовал использовать классы против идентификаторов. Это имеет дело с гораздо более широкой темой (специфичность CSS), но чрезвычайно полезно подумать в начале вашей карьеры. При этом я работаю над решением для вас, так как я думаю, я знаю, что вы хотите.

Как отметил комментатор - это поможет ALOT увидеть то, что вы хотите видеть в качестве конечного результата. Исходя из моей интерпретации ваших скриншотов (плохое качество и неописательный FYI), я чувствую, что вы хотите этогоheader сохранить левую / назад кнопку и логотип на мобильных устройствах. Тем не менее, для размера окна просмотра настольного компьютера / ноутбука вы хотите, чтобы кнопка пересылки показывала себя.

Если это неверно, пожалуйста, проверьте!

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

Отойдя от JSFiddle вышеприведенного плаката, я придумала «лучшее» решение, которое объединяет элементы внутриheader в отличие от выхода за пределы «контейнера», в котором он существует:https://jsfiddle.net/f815aa6y/1/

Все еще работаем над правильным решением, чтобы оно выровнялось по центру :)

Я добавлю дизайн, который я собираюсь, в мой оригинальный пост. Извиняюсь за расплывчатость - я надеялся найти общее решение, чтобы в будущем я смог применить его к различным сценариям. Luke C
1

flex(IE11) иjustify-contentзатем спрячьте.clearfix и удалите его, когда на четвертой позиции:

с 3 (4 включая очистку)

#header-wrap {
  display: flex;
  justify-content: space-between;
}

#header-wrap > div {
  border: solid;
  width: 100px;
  margin:0 0 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
  display: none;
}

.clearfix {
  opacity: 0;
}
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

когда только 2 (3) тот же CSS вовлечен

#header-wrap {
  display: flex;
  justify-content: space-between;
}

#header-wrap > div {
  border: solid;
  width: 100px;
  margin:0 0 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
  display: none;
}

.clearfix {
  opacity: 0;
}
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="clearfix"></div>
  </div>
</section>

для старых браузеров.

с вашей структурой вы могли бы использоватьtext-align, :after и селектор+:

с 3 (4)

#header-wrap {
  text-align: justify;
}
#header-wrap:after {
  content: '';
  display: inline-block;
  width: 99%;
}
#header-wrap > div {
  display: inline-block;
  vertical-align: top;
  border: solid;
  width: 100px;
}
#header-wrap > div + div + div +.clearfix {
  display: none;
}
.clearfix {
  opacity: 0;
}
 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

и 2 (3) тот же CSS вовлечен:

#header-wrap {
  text-align: justify;
}
#header-wrap:after {
  content: '';
  display: inline-block;
  width: 99%;
}
#header-wrap > div {
  display: inline-block;
  vertical-align: top;
  border: solid;
  width: 100px;
}
#header-wrap > div + div + div +.clearfix {
  display: none;
}
.clearfix {
  opacity: 0;
}
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="clearfix"></div>
  </div>
</section>

4

CSS flexbox.

Для ясности и краткости я удалил несколько несущественных декоративных стилей из исходного кода. Я также использовал скомпилированный CSS для тех, кто не использует препроцессоры.

макет 1: [слева] [в центре] [справа]

#header-wrap {
  display: flex;                   /* 1 */
  align-items: flex-start;         /* 2 */
  justify-content: space-between;  /* 3 */
  text-align: center;
  padding: 1rem 0;
}

#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left   { border: 1px solid red; width: 100px; }
.header-right  { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left">
      <p>1</p>
    </div>
    <div class="header-center">
      <p>2</p>
      <p>2</p>
      <p>2</p>
      <p>2</p>
    </div>
    <div class="header-right">
      <p>3</p>
      <p>3</p>
    </div>
  </div>
</section>

Заметки:

Установите гибкий контейнер.Предотвращение растягивания элементов Flex на полную высоту (настройка по умолчанию),flex-start значение будет выравнивать каждый элемент в началепоперечная ось контейнера. В данном случае это вершина вертикальной (Y) оси. Если вы хотите, чтобы элементы располагались по центру, используйтеcenter значение вместо Значением по умолчанию являетсяstretch.Выровнять гибкие элементы по горизонтали в контейнере, Вы также можете попробоватьjustify-content: space-around, Обратите внимание, что этот метод будет центрировать средний элемент в контейнере, только если левый и правый элементы (обратная / прямая ссылки) имеют одинаковую ширину. Если ссылки различаются по длине, вам нужно использовать другой метод (см. Вставки # 71-78Вот).макет 2: [слева] [в центре]

#header-wrap::after {               /* 4 */
    content: "";
    width: 100px;
}
#header-wrap {
    display: flex;                  /* 1 */
    align-items: flex-start;        /* 2 */
    justify-content: space-between; /* 3 */
    text-align: center;
    padding: 1rem 0; 
}
#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left   { border: 1px solid red; width: 100px; }
.header-right  { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }
<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left">
      <p>1</p>
    </div>
    <div class="header-center">
      <p>2</p>
      <p>2</p>
      <p>2</p>
      <p>2</p>
    </div>
  </div>
</section>

Заметки:

Используйте невидимый псевдоэлемент, чтобы создать равный баланс на противоположном конце контейнера. По сути, это замена элемента DOM, который был удален из первого примера. Это держит средний пункт по центру.jsFiddleПоддержка браузера

Flexbox поддерживается всеми основными браузерами,кроме IE 8 и 9.

Некоторые последние версии браузеров, такие как Safari 8 и IE10, требуютпрефиксы поставщиков.

Чтобы быстро добавить все префиксы, которые вам нужны, используйтеAutoprefixer.

Подробнее вэтот ответ.

Изменить значение вalign-items: flex-start вcenter. Michael_B
Привет - Спасибо, что нашли время, чтобы помочь. Последняя проблема, с которой я до сих пор сталкиваюсь, - это вертикальное выравнивание самих элементов div внутри родительского контейнера. Вертикальное выравнивание содержимого в каждом элементе хорошо и заботиться. Но - если каждый из 3-х отдельных встроенных div имеет разную высоту, то они не будут все вертикально выровнены внутри родителя. идеи? Luke C
Замечательно! Я понимаю, что flex не имеет большой поддержки в IE9 +, но, рассматривая его подробнеессылка на сайтэто решение позволит избежать ошибок, насколько я вижу. Спасибо за вашу помощь Luke C
0

https://jsfiddle.net/5gxLvp8a/4/

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    position: relative;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
    position: absolute;
    left: 25px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
    position: absolute;
    right: 25px;
  }

Смотрите фрагмент кода ниже:

html, html a {
  font-size: 10px; }

  #header-blue {
    width: 100%;
    margin-bottom: 50px;
    height: auto;
    background-color: #3498DB;
    color: #fff; }
    #header-blue #header-wrap {
      text-align: center;
      border: 1px solid green;
      margin: 0 auto;
      padding: 1rem 2.5rem;
      position: relative; }
      #header-blue #header-wrap div {
        display: inline-block;
        vertical-align: middle; }
    #header-blue .header-left {
      float: left;
      border: 1px solid red;
      width: 100px;
      position: absolute;
      left: 25px; }
      #header-blue .header-right {
        float: right;
        border: 1px solid red;
        width: 100px;
        position: absolute;
        right: 25px; }
        #header-blue .header-center {
          border: 1px solid red;
          margin: 0 auto !important;
          display: inline-block;
          width: 100px; }

.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }
<section id="header-blue">
      <div id="header-wrap">
        <div class="header-left"><p>1</p></div>
        <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
        <div class="header-right"><p>3</p><p>3</p></div>
        <div class="clearfix"></div>
      </div>
    </section>
    
        <section id="header-blue">
      <div id="header-wrap">
        <div class="header-left"><p>1</p></div>
        <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
        <div class="clearfix"></div>
      </div>
    </section>

Похожие вопросы