c# - 如何划分 3 个 div(CSS + MVC)

Question

我有 15 个图表，我想每行显示 3 个图表。它看起来像这样:

• 图表 1 图表 2 图表 3
• 图 4 图 5 图 6
• 图表 7 图 8 图 9

我的 div 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 />

    }

}

但是看起来不太好。这段代码有什么问题？

Answer 1

给 div 设置一个宽度/具有宽度的类，其中只有三个可以容纳(即 30% 宽度)。这样你的浏览器就只会连续显示 3 个:

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>

也可以稍微调整以进行嵌套:

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>