Error of Declaration

Asked

Viewed 35 times

1

I have a problem with a DIV statement, as I’m learning on my own, I’d like a little help with that. When I declare the DIV in this way I can place the images side by side, but there I can not insert the texts without breaking line. 

<section id="times">
        <h2>TIMES</h2>
        <p> Temos para você os mais variados times que você pode apostar e escolher para sua mitada ou ganho ainda mais de cartolas.</p>
        <div>
       <div class="figure">
               <p><img class=scaled src="image/3.jpg" alt="cartola">
               <p>Time do Editor
               <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
               <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
           </div>

           <div class="figure">
               <p><img class=scaled src="image/3.jpg" alt="cartola">
               <p>Time do Editor
           </div>

           <div class="figure">
               <p><img class=scaled src="image/3.jpg" alt="cartola">
               <p>Time do Editor

           </div>

            <div class="figure">
               <p><img class=scaled src="image/3.jpg" alt="cartola">
               <p>Time do Editor
           </div>                       

           <div class="figure">
               <p><img class=scaled src="image/3.jpg" alt="cartola">
               <p>Time do Editor
           </div>   
            </div>
        </section>

And in CSS I put it this way:

#times{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    padding: 20px 20px;
    background-color: #A9A9A9;
    color: #000000;

}


#times p{
    margin-bottom: 2.5em;
    max-width: 1000px;

}

div{
        display:flex;
        text-align: top; 
        bottom: auto;


}

div.figure {
  display: table;
  padding:  10px 10px    
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
  padding: -20px -20px;
  text-align: center;
  font-family:inherit;
  font-style:oblique;

}

figcaption p {
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
}
html css

  • Tip 1: Close the tags with </p>; Tip 2: Use it min-width: 300px in class figure.

  • Solved, Thank you!

  • Italo, it is always good to finish the question by marking in the answer that solved your problem. If the answer still has a problem, you can use the comment field to ask questions, but never leave your questions unresolved. This is not the focus of the community. Abs!

1 answer

0

In addition to missing close tags <p>, you can put white-space: nowrap; in the statement div.figure p + p to avoid line break:

div.figure p + p {
   display: table-caption;
   caption-side: top;
   padding: -20px -20px;
   text-align: center;
   font-family:inherit;
   font-style:oblique;
   white-space: nowrap;
}

Behold:

#times{
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: justify;
   padding: 20px 20px;
   background-color: #A9A9A9;
   color: #000000;
}

#times p{
   margin-bottom: 2.5em;
   max-width: 1000px;
}

div{
   display:flex;
   text-align: top; 
   bottom: auto;
}

div.figure {
   display: table;
   padding:  10px 10px;
}

div.figure p + p {
   display: table-caption;
   caption-side: top;
   padding: -20px -20px;
   text-align: center;
   font-family:inherit;
   font-style:oblique;
   white-space: nowrap;
}

figcaption p {
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
}
<section id="times">
   <h2>TIMES</h2>
      <p> Temos para você os mais variados times que você pode apostar e escolher para sua mitada ou ganho ainda mais de cartolas.</p>
   <div>
      <div class="figure">
         <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
         <p>Time do Editor</p>
         <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
         <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
      </div>

      <div class="figure">
         <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
         <p>Time do Editor</p>
      </div>

      <div class="figure">
         <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
         <p>Time do Editor</p>
      </div>

      <div class="figure">
         <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
         <p>Time do Editor</p>
      </div>

      <div class="figure">
         <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
         <p>Time do Editor</p>
      </div>
   </div>
</section>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.