0

Всем привет! У меня есть 3 блока - подскажите как их разместить снизу по центру друг за дружкой без промежутков, чтобы такое положение сохранялось для всех разрешений экранов? Причем ширина блока trail-end должна быть произвольной

.mad-breadcrumbs {
  height: 300px;
  position: relative;
}
.trail-end {
  text-transform: uppercase;
  color: #fff;
  font-family: "HelveticaNeue-CondensedBold";
  font-size: 18px;
  background-color: orange;
  width: 250px;
  height: 48px;
  text-align: center;
  line-height: 60px;
  position: absolute;
  bottom: 0;
  left: 41%;
}
.trail-end-right {
  background-color: red;
  height: 48px;
  width: 18px;
  position: absolute;
  bottom: 0;
  left: 90%;
}
.trail-end-left {
  background-color: green;
  height: 48px;
  width: 18px;
  position: absolute;
  bottom: 0;
  left: 20%;
}
<div class="mad-breadcrumbs">
  <span class="trail-end-left">Л</span>
  <span class="trail-end">Товары</span>
  <span class="trail-end-right">Р</span>
</div>

1 ответ 1

1
<style type="text/css">
    .mad-breadcrumbs {
        display: table;
        height: 300px;
        margin: 0 auto;
    }

    .mad-breadcrumbs .vertical-align {
        display: table-cell;
        vertical-align: bottom;
    }

    .trail-end-left {
        background-color: green;
        display: inline-block;
        float: left;
        width: 18px; height: 48px;
    }

    .trail-end {
        background-color: orange;
        color: #fff;
        display: inline-block;
        float: left;
        font-family: "HelveticaNeue-CondensedBold";
        font-size: 18px;
        height: 48px;
        text-align: center;
        text-transform: uppercase;
    }   

    .trail-end-right {
        background-color: red;
        display: inline-block;
        float: left;
        width: 18px; height: 48px;
    }
</style>

<div class="mad-breadcrumbs">
    <div class="vertical-align">
        <span class="trail-end-left">Л</span>
        <span class="trail-end">Товары</span>
        <span class="trail-end-right">Р</span>
    </div>
</div>
3
  • я не указал, но ширина элемента должна быть относительной, т.к. в ней содержатся названия. "и пропишите желаемую позицию по 0Y" а вот это как сделать для адаптивной страницы или вы предлагаете каждый раз создавать медиа запросы?
    – Вася
    28 авг 2015 в 14:50
  • 1
    @Вася странное у вас понимание относительности, учитывая тот факт, что вы сами задали фиксированную ширину дочерних элементов в коде. Попробуйте предложенный мной выше код адаптировать под свои нужды (сообщение я отредактировал). 28 авг 2015 в 15:12
  • виноват, хотел написать min-width Нет, к сожалению, не удается ваш пример адаптировать под себя, т.к. mad-breadcrumbs относительно которого позиционируем блок нельзя делать dispalay:table; т.к. во-первых в нем много вложенных элементов со своим позиционированием и блоке задана бэкраунд картинка, которая при таблице сразу же обрезается..
    – Вася
    31 авг 2015 в 9:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.