CODEWITHSUNDEEP
c#htmlcss
kojirosan
kojirosan

Reputation: 507

How to divide 3 divs(CSS + MVC)

I have 15 charts and i want to show 3 charts per row. It looks like this:

My divs CSS 

     <div class="one-third">
     <div class="one-third">
     <div class="one-third last">

 for (int i = 0; i < 15; i++)
{
    if (i != 0 && i % 3 != 0)
    {
        <div class="one-third">
         //chart code 
        </div>
    }
    else if (i % 3 == 0)
    {
        <div class="one-third last">
              //chart code      
        </div>
<br />

    }

}

But it doesn't look OK. What's the problem with this code?

Upvotes: 0

Views: 100

Answers (1)

jbutler483
jbutler483

Reputation: 24559

Gice the divs a width / class that has a width, in which only three can fit on (i.e 30% width). That way your browser will only alow 3 on a row anyway:

div{
  display:inline-block;
  width:30%;
  margin:1%;
  height:100px;
  padding:0;
  background:rgba(0,0,0,0.2);
  transition:all 0.8s;
  text-align:center;
  font-size:30px;
  line-height:100px;
  }

/**demo only***/

div:hover{
  background:tomato;
  }
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

Which could be adapted slightly for nesting as well:

div {
  display: inline-block;
  width: 30%;
  margin: 1%;
  height: 100px;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.8s;
  vertical-align: top;
  text-align: center;
}
/**demo only***/

div:hover {
  background: tomato;
}
.nested {
  height: 28%;
  width: 28%;
  padding: 0;
}
.nested:hover {
  background: cornflowerblue;
}
<div>
  <div class="nested">1.1</div>
  <div class="nested">1.2</div>
  <div class="nested">1.3</div>
  <div class="nested">1.4</div>
  <div class="nested">1.5</div>
  <div class="nested">1.6</div>
  <div class="nested">1.7</div>
  <div class="nested">1.8</div>
  <div class="nested">1.9</div>
</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

Upvotes: 2

Related Questions