调整浏览器大小时，为什么文本会跳出框框？

时间：2019-01-22 09:14:05

标签： html css

我正在尝试使此框具有响应性，但是一旦我调整浏览器的大小，它们就会跳到图像下方。调整浏览器大小时，如何使文本和图像保持在一起？我尝试删除了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>

2 个答案:

答案 0 :(得分：0)

使用此代码，将为您提供帮助。

.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>

答案 1 :(得分：0)

您应该非常清楚最终输出的期望。如您所知，我已使图片显示为圆形/圆形

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

.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="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
    <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="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
    <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="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
    <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>

相关问题
最新问题