如何使用 flexbox 获取边框内的图像和文本

Question

我正在尝试重新创建它，但我一直坚持让图像和文本适合最里面的边框。最后一个应该有一个外边框，一个内边框和一个扩展到顶部的 div 。然后是顶部跨越 div 的 30% 宽度的图片。然后文本应该是宽度为顶部跨越 div.

的 70%

这是我目前得到的 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>

Answer 1

我想你可以试试这个（而不是 .winter-image 和 .wi ）：

.content-wrapper {
  display: flex;
}

.winter-image {
  flex: 3;
}

.wi {
  flex: 7;
}

Answer 2

确切的预期结果尚不清楚。但是，这是一个使用 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>

如何使用 flexbox 获取边框内的图像和文本

How to use flexbox to get an image and text insid my border

html

css

flexbox