2

Как можно реализовать нечто подобное? Мне нужно чтобы было 2 блока в ряд, в 1-ом - картинка, во 2-ом - текст (но по центру, как на картинке). И эти 2 блока должны быть на всю ширину страницы.

введите сюда описание изображения

Я сделал как в предложенном ответе, но все равно остались поля по бокам. Я использую bootstrap, может дело в нем?

введите сюда описание изображения

.container {
  display: flex;
  flex-grow: 2;
}

.block__img,
.block__text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  height: 350px;
  padding: 10px;
}

.block__img {
  background: url("https://static.tildacdn.com/tild3366-6164-4161-b235-613035623266/infineon_webinar_coo.png") center center;
  background-size: cover;
}

.block__text {
  background-color: #d2d2d2;
}
<div class="container">
  <div class="block__img"></div>
  <div class="block__text">
    <main>
      <h4>Основные сведения о полевых транзисторах<br></h4>
      <p>1. Классификация полевых транзисторов<br>2. МОП транзисторы<br></p>
    </main>
  </div>
</div>

2
  • Через flexbox, например.
    – andreymal
    6 мая 2020 в 20:48
  • Можно пожалуста пример, как это реализовать?
    – Red Bro
    6 мая 2020 в 20:54

1 ответ 1

2

Вариант с использованием flex. Пример:

.container {
  display: flex;
  flex-grow: 2;
}

.block__img,
.block__text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  height: 150px;
  padding: 10px;
}

.block__img {
  background: url("https://i1.wp.com/god-noviy.ru/wp-content/uploads/2017/11/172.jpg") center center;
  background-size: cover;
}

.block__text {
  background-color: #d2d2d2;
}
<div class="container">
  <div class="block__img"></div>
  <div class="block__text">
    <h2>Семья</h2>
  </div>
</div>

3
  • Я поправил вопрос, вы не знаете в чем может быть причина?
    – Red Bro
    7 мая 2020 в 6:58
  • @RedBro а вы не хотите код показать ? 7 мая 2020 в 7:11
  • Я добавил код в вопрос
    – Red Bro
    7 мая 2020 в 7:48

Ваш ответ

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

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