html - 当我调整浏览器大小时，为什么文本会出现在框外？

Question

我正在尝试使这些框响应，但是一旦我调整浏览器的大小，它们就会跳到图像下方。当我调整浏览器大小时，我可以做些什么来使这些文本和图像保持在一起？我试图删除display: flex;，flex-direction: row;然后文本在图像下方而不是在它旁边。

.container img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  max-width: 150px;
  max-height: 150px;
  padding-left: 2px;
}

.container p {
  font-weight: 900;
  line-height: 1.25;
  font-size: 0.8em;
  text-align: left;
  color: white;
}

.container h1 {
  font-weight: 900;
  font-size: 20px;
  text-align: left;
  color: #a57354;
}

h2 {
  font-weight: 900;
  line-height: 1.25;
  font-size: 30px;
  text-align: left;
  padding-left: 20px;
}

.container {
  display: flex;
  margin: 10px;
  align-items: center;
  justify-content: center;
}

.wine-row {
  padding: 10px 0;
  border: dashed 1.5px #a57354;
  display: flex;
  flex-direction: row;
  margin: 3px;
  width: 100%;
  height: 30%;
}

.wine-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
}

<div class="container">
  <div class="wow zoomIn wine-row">
    <img src="klipp.jpg">
    <div class="wine-text-container">
      <h1> Klippning </H1>
      <p>Påbörjas med en konsulation där du berättar hur du tänker kring resultatet. Därefter fräschar vi upp din frysir utifrån dina önskemål. Vi hjälper dig gärna med tips och råd gällande din hårtyp och styling.</p>
    </div>
  </div>
  <div class="wow zoomIn wine-row">
    <img src="shavee.jpg">
    <div class="wine-text-container">
      <h1> Rakning</H1>
      <p> Vi inleder med en konsulation där kunden ger sina tankar kring ett resultat. Därefter använder vi oss av verktyg och produkter som passar just din skäggutväxt för att åstadkomma ditt val av resultat. Rakning avslutas självklart med ett kalt och
        uppfirskande omslag. </p>
    </div>
  </div>
  <div class="wow zoomIn wine-row">
    <img src="ansikt.jpg">
    <div class="wine-text-container">
      <h1> Ansiktsbehandling </H1>
      <p>Kundens val av ansiktsbehandling. Empire barber erbjuder uppfriskande och avslappnande ansiktsbehandling, behandling som innehåller rengöring, hudanalys och peeling. Ge dig själv eller någon annan vän, familj en present av denna typ av behandling
        som utförs av våra erfarna barberare.
      </p>
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

使用此代码，这将对您有所帮助。

.container img {
  height: 50px;
  padding-left: 2px;
}

.container p {
  font-weight: 900;
  line-height: 1.25;
  font-size: 0.8em;
  text-align: left;
  color: black;
}

.container h1 {
  font-weight: 900;
  font-size: 20px;
  text-align: left;
  color: #a57354;
}

h2 {
  font-weight: 900;
  line-height: 1.25;
  font-size: 30px;
  text-align: left;
  padding-left: 20px;
}

.wine-row {
  padding: 10px 0;
  border: dashed 1.5px #a57354;
}

.container {
  display: flex;
}

.wow.zoomIn.wine-row {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

<div class="container">
  <div class="wow zoomIn wine-row">
    <img src="klipp.jpg">
    <div class="wine-text-container">
      <h1> Klippning </H1>
      <p>Påbörjas med en konsulation där du berättar hur du tänker kring resultatet. Därefter fräschar vi upp din frysir utifrån dina önskemål. Vi hjälper dig gärna med tips och råd gällande din hårtyp och styling.</p>
    </div>
  </div>
  <div class="wow zoomIn wine-row">
    <img src="shavee.jpg">
    <div class="wine-text-container">
      <h1> Rakning</H1>
      <p> Vi inleder med en konsulation där kunden ger sina tankar kring ett resultat. Därefter använder vi oss av verktyg och produkter som passar just din skäggutväxt för att åstadkomma ditt val av resultat. Rakning avslutas självklart med ett kalt och
        uppfirskande omslag. </p>
    </div>
  </div>
  <div class="wow zoomIn wine-row">
    <img src="ansikt.jpg">
    <div class="wine-text-container">
      <h1> Ansiktsbehandling </H1>
      <p>Kundens val av ansiktsbehandling. Empire barber erbjuder uppfriskande och avslappnande ansiktsbehandling, behandling som innehåller rengöring, hudanalys och peeling. Ge dig själv eller någon annan vän, familj en present av denna typ av behandling
        som utförs av våra erfarna barberare.
      </p>
    </div>
  </div>
</div>