Как использовать flexbox для получения изображения и текста внутри моей границы

Я пытаюсь воссоздать это, но я застрял на том, чтобы изображение и текст помещались внутри самой внутренней границы. финал должен иметь внешнюю границу, внутреннюю границу и div, который расширяется сверху. Затем изображение, которое составляет 30% ширины верхнего охвата div. Затем текст, который должен иметь ширину 70% от верхнего охвата div.

Как использовать flexbox для получения изображения и текста внутри моей границы

Это то, что я получил до сих пор HTML:

:root {
  --winter-primary: #ffd110;
}

.outside-winter-border {
  border: 2px solid var(--winter-primary);
  margin: auto;
  max-width: 1000px;
}

.insdie-winter-border {
  border: 2px solid var(--winter-primary);
  margin: 20px;
}

.wh {
  background-color: var(--winter-primary);
  padding: 30px;
}

.winter-image {
  width: 30%;
  float: left;
}

.wi {
  width: 70%;
  float: right;
}
<section class = "winter">
  <div class = "outside-winter-border">
    <div class = "insdie-winter-border">
      <div class = "section-heading">
        <div class = "wh">
          <h2>Winter</h2>
        </div>
      </div>
      <div class = "content-wrapper">
        <div class = "winter-image">
          <div class = "section-image">
            <a href = "winter.html">
              <img src = "assets/images/winter.jpg" alt = "Winter Image">
            </a>
          </div>
        </div>
        <div class = "wi">
          <div class = "section-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
33
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, вы можете попробовать это (вместо .winter-image и .wi ):

.content-wrapper {
  display: flex;
}

.winter-image {
  flex: 3;
}

.wi {
  flex: 7;
}
Ответ принят как подходящий

Точный желаемый результат неясен. Однако вот версия с использованием flex, которая получает и изображение, и текст внутри рамки. Не используйте float.

.outside-winter-border {
  border: 2px solid var(--winter-primary);
  margin: auto;
  max-width: 1000px;
}

.insdie-winter-border {
  border: 2px solid var(--winter-primary);
}

img {
  height: 100%;
}

.wh {
  display: inline-flex;
}

.insdie-winter-border {
  display: flex;
  align-items: center;
}

:root {
  --winter-primary: #ffd110;
}

p {
  margin-left: 1em;
}

.section-heading {
  width: 100%;
  background-color: var(--winter-primary);
  text-align: center;
}

.section-heading>h2 {
  margin: 0;
}
<section class = "winter">
  <div class = "outside-winter-border">
    <div class = "section-heading">
      <h2>Winter</h2>
    </div>
    <div class = "insdie-winter-border">
      <div class = "wh">
        <a href = "winter.html">
          <img src = "https://dummyimage.com/125/000/fff" alt = "Winter Image">
        </a>
      </div>
      <div class = "content-wrapper">
        <div class = "winter-image">

        </div>
        <div class = "wi">
          <div class = "section-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
i.stack.imgur.com/zGyxH.png эй, извините, я думал, что изображение загружено с моим сообщением. Это то, что я пытаюсь повторить.
confusedcoder 07.04.2022 21:19

@confusedcoder Посмотреть правки

Kameron 07.04.2022 21:25

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