n之后改变风格。 结果 - PHP

Question

Hi i use PHP to fetch data from database using while loop. A class paid or unpaid is applied through database field value. Paid members are shown 2 members per line and unpaid 3 per line and that are working well for me. But a small little issue is when paid members are ended, i want a line-break then display unpaid members from a new line 3 in a row. How i can do that ?

HTML

<div class="main paid">
  ABC
</div>
<div class="main paid">
  ABC
</div>
<div class="main paid">
  ABC
</div>
<div class="main unpaid">
  ABC
</div>
<div class="main unpaid">
  ABC
</div>
<div class="main unpaid">
  ABC
</div>
<div class="main unpaid">
  ABC
</div>

CSS

.main{
  float:left;
  margin-bottom:30px;
  border:1px solid #ddd;
}
.paid{
  width:49%;
}
.unpaid{
  width:32%;
}

Working Fiddle: https://jsfiddle.net/qzxyyo2x/1/

Here paid or unpaid are table values fetched from database. Width is applied to them. I want to add a "line-break" when paid members are ended to display unpaid members 3 in a row from the next row. In this question i need a line-break after 3 results. and if paid members are 2,4,5,6 or whatever. I need a line-break after displaying all paid members.

Thanks in advance....

Answer 1

You could use some clearfix code to trigger unpaid classes to break with clear: both; however if applied to the entire .unpaid class, all unpaid classes would be on their own line.

Incorrect Demo: https://jsfiddle.net/qzxyyo2x/2/

A quick solution would be a new class called .clearfix . You could use this whenever an unpaid class follows a paid class, but not when an unpaid class follows an unpaid class. This logic will have to be done in PHP.

Correct Demo: https://jsfiddle.net/qzxyyo2x/3/

An even more elegant solution would involve creating extra div s surrounding each of your rows, but this may involve changing more of your logic than just one class.