Declaration Error

Question

Declaration Error

Navigation

#1 by (0 votes)

1

I'm having a problem in declaring a DIV, as I'm learning alone, I'd like some help with this. When I declare the DIV in this way I can put the images side by side, but then I can not insert the texts without breaking the 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

asked by anonymous 20.05.2018 / 04:06

1 answer

How do I put the scroll bar on the materialize card? [closed] How to return the value inside a function? [duplicate]

score 0 · Answer 1

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

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;
}

See:

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