我正在尝试使用php循环包含每两个元素的div，但是我没有得到所需的输出。
在我的PHP代码下面：
<?
$diensten = "SELECT * FROM snm_content WHERE catid = 9 AND state = 1 ORDER BY ordering";
$dienstencon = $conn->query($diensten);
$tel = 1;
while($diensten = $dienstencon->fetch_assoc()){
if (strlen($diensten['introtext']) > 100){
$shortstr = substr($diensten['introtext'], 0, 100) . '...';
}else{
$shortstr = $diensten['introtext'];
}
//Wrap de slide in deze div elke 2 keer binnen de loop
if($tel % 2 == 1){
$dienstenslider .= '<div class="col-lg-12 col-md-12 col-sm-12">';
}
$dienstenslider .= '
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/'.$diensten['alias'].'.html">'.$diensten['title'].'</a></p>
<p class="ser-cont">
'.strip_tags($shortstr).'
</p>
<a href="info/'.$diensten['alias'].'.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>';
if(($tel % 2) == 0){
$dienstenslider .= '</div> <div class="col-lg-12 col-md-12 col-sm-12">';
}
$tel++;
}
if(($tel % 2) != 0){
$dienstenslider .= '</div>';
}
echo $dienstenslider;
?>
这是我从该代码中获得的输出：
<div class="box ser-box large-width-box-w1 box-h1">
<div id="service-owl" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 272px;">
<div class="owl-wrapper" style="width: 3120px; left: 0px; display: block; transition: all 1000ms ease; transform: translate3d(0px, 0px, 0px);">
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/begeleiding-individueel.html">Begeleiding Individueel</a></p>
<p class="ser-cont">
Begeleiding thuis is praktische hulp aan mensen die door problemen de grip op hun dagelijks leven...
</p>
<a href="info/begeleiding-individueel.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/verpleging.html">Verpleging</a></p>
<p class="ser-cont">
Thuis is de plek waar u het liefst wilt zijn. Daar voelt u zich het meest op uw gemak. In uw eige...
</p>
<a href="info/verpleging.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/hulp-bij-het-huishouden.html">Hulp bij het huishouden</a></p>
<p class="ser-cont">
Als u door welke reden dan ook niet meer zelfstandig uw huishouden kunt voeren en hierbij (tijdel...
</p>
<a href="info/hulp-bij-het-huishouden.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/persoonlijke-verzorging.html">Persoonlijke verzorging</a></p>
<p class="ser-cont">
Heeft u moeite met opstaan? Kunt u zichzelf steeds moeilijker verzorgen? Of geldt dit misschien v...
</p>
<a href="info/persoonlijke-verzorging.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/hulp-bij-dementie.html">Hulp bij Dementie</a></p>
<p class="ser-cont">
in ontwikkeling
</p>
<a href="info/hulp-bij-dementie.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- Slider -->
</div>
</div>
</div>
</div>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
</div>
</div>
虽然这是我想要的：
<div class="box ser-box large-width-box-w1 box-h1">
<div id="service-owl" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 297px;">
<div class="owl-wrapper" style="width: 3120px; left: 0px; display: block; transform: translate3d(-780px, 0px, 0px); transition: all 800ms ease;">
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/begeleiding-individueel.html">Begeleiding Individueel</a></p>
<p class="ser-cont">
Begeleiding thuis is praktische hulp aan mensen die door problemen de grip op hun dagelijks leven...
</p>
<a href="info/begeleiding-individueel.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/verpleging.html">Verpleging</a></p>
<p class="ser-cont">
Thuis is de plek waar u het liefst wilt zijn. Daar voelt u zich het meest op uw gemak. In uw eige...
</p>
<a href="info/verpleging.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/persoonlijke-verzorging.html">Persoonlijke verzorging</a></p>
<p class="ser-cont">
Heeft u moeite met opstaan? Kunt u zichzelf steeds moeilijker verzorgen? Of geldt dit misschien v...
</p>
<a href="info/persoonlijke-verzorging.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i><a href="info/hulp-bij-dementie.html">Hulp bij Dementie</a></p>
<p class="ser-cont">
in ontwikkeling
</p>
<a href="info/hulp-bij-dementie.html" class="ser-read-more">Lees meer<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slider -->
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
</div>
</div>
</div>
</div>
我如何获得该输出？即使装入的物品数量不均匀，也是如此？
This是我目前正在进行的工作（如您所见，滑块无法正常工作）。
This几乎是滑块工作的网站的副本（我之所以没有复制的原因是因为它过时/乱码）。
答案 0 :(得分：1)
使用模数的方法是正确的，但您正在编写重复的开始标记 第一种用法没问题：
//Wrap de slide in deze div elke 2 keer binnen de loop
if($tel % 2 == 1){
$dienstenslider .= '<div class="col-lg-12 col-md-12 col-sm-12">';
}
您应该只使用结束标记的第二种用法：
if(($tel % 2) == 0){
// the opening tag will be written in the first usage above. writing it here too results in duplicate opening tags
// $dienstenslider .= '</div><div class="col-lg-12 col-md-12 col-sm-12">';
$dienstenslider .= '</div>';
}
然后你在while循环之外有另一种用法。这看起来也不错。
if(($tel % 2) != 0){
$dienstenslider .= '</div>';
}