Question

我正在尝试将此文字放在图片旁边，并调整它们的大小，然后随着它们的变小而彼此堆叠。我究竟做错了什么？任何帮助都会很棒。这是我的CodePen： Flexbox Container Text and Image

    <!-- Who We Are -->

<div class="who-container">
  <div class="who-wrapper">
    <img class="who-pic" src="https://images.unsplash.com/photo-1457393568996-e452740c8346?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9fcb386597db5dfa31416a5a9f1cf3f&auto=format&fit=crop&w=2850&q=80" alt="">
      <h1 class="who">Who We Are</h1>
        <p class="who">It's better than kicking the puppy dog around and all that so.
          Don't be bashful drop me a line. Van Dyke Brown is a very nice brown,
          it's almost like a chocolate brown. Mix your color marbly don't mix it dead.
          See there how easy that is. The little tiny Tim easels will let you down.</p>
  </div>
</div>



body {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}

/* Who We Are */

.who-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid black;
  width: 100%;
  height: 30em;
  margin: 2em 0;
}

.who-wrapper {
  /* display: flex;
  flex-wrap: wrap; */
}

.who-pic {
  /* display: flex; */
  width: 100%;
  height: 100%;
}

.who {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
}

Answer 1

我稍微更改了标记，所以.who-wrapper仅包含文本，并且摆脱了.who-container上的display:grid

body {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}
/* Who We Are */
.who-container {
  display: flex;
  flex-wrap: wrap;
}
.who-pic {
  width: 100%;
  height: 100%;
}

@media(min-width: 768px) {
  .who-pic, .who-wrapper {
    width: 50%;
  }
}
.who {
  text-align: center;
}

<!-- Who We Are -->

<div class="who-container">
    <img class="who-pic" src="https://images.unsplash.com/photo-1457393568996-e452740c8346?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9fcb386597db5dfa31416a5a9f1cf3f&auto=format&fit=crop&w=2850&q=80" alt="">
    <div class="who-wrapper">
      <h1 class="who">Who We Are</h1>
        <p class="who">It's better than kicking the puppy dog around and all that so.
          Don't be bashful drop me a line. Van Dyke Brown is a very nice brown,
          it's almost like a chocolate brown. Mix your color marbly don't mix it dead.
          See there how easy that is. The little tiny Tim easels will let you down.</p>
    </div>
</div>

试图将图片和文本放入一个flexbox容器中，文本位于容器下方，而不是试图放入并做出响应

1 个答案: