Изображение с проблемой дизайна перекрытия блоков

Доброе утро всем,

В настоящее время у меня возникают проблемы с выравниванием div внутри контейнера с фоновым изображением. В настоящее время они сидят бок о бок, и я не могу заставить их правильно выровняться, я прикрепил изображение того, чего я пытаюсь достичь, это вроде как там, но мне просто нужно, чтобы выравнивание работало правильно :( - может ли кто-нибудь указать мне правильное направление?

Заранее спасибо!

Чего я пытаюсь достичь:

Изображение с проблемой дизайна перекрытия блоков

    .card {
        position: relative;
        display: flex;
        align-items: center;
        float: left;
        margin: (30px) 0;
        width: 45%;

        @media #{$BPD} {
            margin: 2.5%;
        }

        @media #{$MaxBPD} {
            width: 100%;
        }

        &:before {
            content: "";
            width: 1px;
            margin-left: -1px;
            float: left;
            height: 0;

            @media #{$BPD} {
                padding-top: 30px / 30px * 100%;
            }
            
        }

        &:after {
            content: "";
            display: table;
            clear: both;
        }
    }

    .card--cta {
        @extend .card;

        display: block;
        padding: 0 !important;

        .card--cta-block {
            display: block;
            padding: 49px 0;
            border-bottom: 1px solid;

            &:last-child {
                border-bottom: 0;
            }
        }

        .card--image {
            margin: 0;
        }
    }


    .card.card--quote {

        display: flex;
        background: $brand-white;
        padding: 48px 24px;
        border: 3px solid black;
        align-items: center;


        @media #{$MaxBPB} {
            padding: 50px 25px;
        }
        
        img {
            z-index: -1;
        }

        div {
            width: 100%;
            text-align: center;

            h2 {
                margin-bottom: 49px;
                line-height: 49px;
            }

            p {
                margin: 30px 0;
                line-height: 30px;
            }
        }
    }

    <div class = "card--cta">
      <div class = "card card--image">
        <picture>
          <img src = "//picsum.photos/400/400/?random" alt = "" />
        </picture>
      </div>
      <div class = "card card--cta">
        <div class = "card--cta-block">
          <h3>Block text 1</h3>
        </div>
        <div class = "card--cta-block">
          <h3>Block text 2</h3>
        </div>
        <div class = "card--cta-block">
          <h3>Block text 3</h3>
        </div>
      </div>
    </div>

html css sass

27.06.2018 12:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 4

Добавьте 2 класса (abc, def) к элементам, показанным ниже.

<div class = "card--cta abc">
      <div class = "card card--image">
        <picture>
          <img src = "//picsum.photos/400/400/?random" alt = "" />
        </picture>
      </div>
      <div class = "card card--cta def">
        <div class = "card--cta-block">
          <h3>Block text 1</h3>
        </div>
        <div class = "card--cta-block">
          <h3>Block text 2</h3>
        </div>
        <div class = "card--cta-block">
          <h3>Block text 3</h3>
        </div>
      </div>
    </div>

и добавьте эти 2 стиля

.abc {
    position: relative;
}
.def {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

Спасибо за ответ, почему-то не сработало :(

— 27.06.2018 12:51

Можете ли вы опубликовать скомпилированный CSS .. я не могу протестировать этот код scss

— 27.06.2018 12:51

27.06.2018 12:42

Это то, что вы хотите?

.card--cta{
  position: relative;
}
.divbox{
  position:absolute;
  top: 0;
  left : 0;
  width : 100%;
  height: 100%;
  display : flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.divbox div{
  background-color: #fff;
  border: 1px solid black;
  padding: 20px;
}

    <div class = "card--cta">
      <div class = "card card--image">
        <picture style = "width: 100%;">
          <img style = "width: inherit;" src = "//picsum.photos/400/400/?random" alt = "" />
        </picture>
      </div>
      <div class = "card card--cta divbox">
        <div class = "card--cta-block">
          <h3>Block text 1</h3>
        </div>
        <div class = "card--cta-block">
          <h3>Block text 2</h3>
        </div>
        <div class = "card--cta-block">
          <h3>Block text 3</h3>
        </div>
      </div>
    </div>

Спасибо за ответ, однажды добавив это по какой-то причине, он просто напортачил :(

— 27.06.2018 12:51

Я просто написал для этого новый CSS. Вам необходимо встроить этот CSS в существующий код SCSS.

— 27.06.2018 13:01

27.06.2018 12:45

Если вам удобно изменять структуру HTML. затем попробуйте использовать следующие стили:

<div class = "container ">
  <div style = "font-size:36px; width:300px;margin: 0 auto;">
    <h3>Block text 1</h3>
    <h3>Block text 2</h3>
    <h3>Block text 3</h3>
  </div>
</div>
<style>
.container {
    /* The image used */
    background-image: url("//picsum.photos/400/400/?random");
    /* Set a specific height */
    min-height: 500px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

27.06.2018 12:51

Вот что я придумал: в итоге я переключил довольно много значений, но в основном я использовал flexbox для центрирования всего. Однако я не знаю, будет ли он работать с вашим скомпилированным CSS, поскольку вы предоставили только SCSS.

Соответствующий CSS, который я добавил, находится внизу.

Всегда вот это:

.card {
  position: relative;
  display: flex;
  align-items: center;
  float: left;
  margin: (30px) 0;
  @media #{$BPD} {
    margin: 2.5%;
  }
  @media #{$MaxBPD} {
    width: 100%;
  }
  &:before {
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    @media #{$BPD} {
      padding-top: 30px / 30px * 100%;
    }
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.card--cta {
  @extend .card;
  display: block;
  padding: 0 !important;
  .card--cta-block {
    display: block;
    padding: 49px 0;
    border-bottom: 1px solid;
    &:last-child {
      border-bottom: 0;
    }
  }
  .card--image {
    margin: 0;
  }
}

.card.card--quote {
  display: flex;
  background: $brand-white;
  padding: 48px 24px;
  border: 3px solid black;
  align-items: center;
  @media #{$MaxBPB} {
    padding: 50px 25px;
  }
  img {
    z-index: -1;
  }
  div {
    width: 100%;
    text-align: center;
    h2 {
      margin-bottom: 49px;
      line-height: 49px;
    }
    p {
      margin: 30px 0;
      line-height: 30px;
    }
  }
}

.card--cta {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card--cta-block {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
}

.card.card--cta {
  height: 516px;
  width: 516px;
  align-items: stretch;
  background: #fff;
  position: absolute;
}

<div class = "card--cta">
  <div class = "card card--image">
    <picture>
      <img src = "//picsum.photos/600/600/?random" alt = "" />
    </picture>
  </div>
  <div class = "card card--cta">
    <div class = "card--cta-block">
      <h3>Block text 1</h3>
    </div>
    <div class = "card--cta-block">
      <h3>Block text 2</h3>
    </div>
    <div class = "card--cta-block">
      <h3>Block text 3</h3>
    </div>
  </div>
</div>

27.06.2018 12:55

Другие вопросы по теме

Как убрать фокус с меню в фокусе при нажатии

Плавающая метка опускается после ввода недопустимого шаблона ввода, я использую проверку шаблона html5

Граница перекрывает дочерний элемент и дочерний элемент li

Высота div не установлена должным образом после поворота содержащегося изображения

Как импортировать таблицу стилей из внешнего источника в React?

Как разместить заполнитель для даты и времени в html?

Не удалось загрузить @font_face на моем локальном хосте wamp?

Bootstrap NavBar Alignment (3 столбца с отзывчивым меню)

Ошибки при попытке создать эффект карусели

Контейнер в бутстрапе не работает

Изображение с проблемой дизайна перекрытия блоков

Ответы 4

Другие вопросы по теме

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