2017-12-31 36 views
-3

다음 PHP 코드는 예상대로 작동하지만 "col-md-4"div가 서로 아래에 나타나지 않습니다. 3 행을 보여줍니다.PHP 코드에서 col-md-4 divs가 서로 나란히 있지 않고 아래에 표시됩니다.

아무도 내가 잘못한 것을 도와 줄 수 있습니까? 다음과 같이

<?php 

$previousCat = null; // starts the category at NULL 

while(!$DETAILS->atEnd()) { 

// Check if GENUS if different. If yes then display GENUS and start row to contain all varieties 
if($DETAILS->getColumnVal("GENUS") != $previousCat) { 

    echo '<div class="row"> 
    <div class="col-md-6 g-my-10 g-bg-pale"><h2>'.$DETAILS->getColumnVal("GENUS").'</h2></div> 
    </div> 
    <div class="row">'; 
} 

// now we output whatever is needed at the start of a new group - in this case, 
// user name and date, since we want those only once 
echo ' 
<div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px"> 
<p><img src="17_photos/'.$DETAILS->getColumnVal("IMAGE").'" title="'.$DETAILS->getColumnVal("VARIETY").'" class="img-fluid" /></p> 
<p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong> 
<br />'.$DETAILS->getColumnVal("DESCRIPTION").' 
<br />'.$DETAILS->getColumnVal("TYPE").'</p> 
</div> 
'; 

// if GENUS is different end the row that contains the varieties 
if($DETAILS->getColumnVal("GENUS") != $previousCat) { 

    echo '</div>'; 
} 


// save the GENUS for comparison with next GENUS 
$previousCat = $DETAILS->getColumnVal("GENUS"); 

$DETAILS->moveNext(); 
} 
$DETAILS->moveFirst(); //return RS to first record 


?> 

출력 코드는 - 별도의 사업부가 최초의 뒤에 배치되는 것 같습니다 COL-MD-4

<div class="row"> 
    <div class="col-md-6 g-my-10 g-bg-pale"><h2>Asian Greens</h2></div> 
    </div> 
    <div class="row"> 
<div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px"> 
<p><img src="17_photos/02897.07.Tatsoi.cat.jpg" title="Tatsoi" class="img-fluid" /></p> 
<p><strong>Tatsoi</strong> 
<br />dark spicy asian green 
<br /></p> 
</div> 
</div><div class="row"> 
    <div class="col-md-6 g-my-10 g-bg-pale"><h2>Beets</h2></div> 
    </div> 
    <div class="row"> 
<div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px"> 
<p><img src="17_photos/nopic.jpg" title="Baby Beats" class="img-fluid" /> 
</p> 
<p><strong>Baby Beats</strong> 
<br /> 
<br /></p> 
</div> 
</div> 
<div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px"> 
<p><img src="17_photos/nopic.jpg" title="Blankoma" class="img-fluid" /></p> 
<p><strong>Blankoma</strong> 
<br />white, round 
<br /></p> 
</div> 
귀하의 문제는 당신이 새 행을 만드는 것 같다
+3

페이지 원본을 볼 때 출력 HTML 샘플을 게시해야합니다. 그 후에 이것은 PHP가 아닌 CSS/HTML 질문이됩니다. –

+0

은 '컨테이너'또는 '컨테이너 - 유체'(가로형)입니까? – apokryfos

+0

감사합니다. Michael. html 출력을 게시했습니다. GENUS가 변경되면 각 col-md-4의 첫 번째 인스턴스에 여분의 div를 배치하는 것처럼 보입니다. 나는 내가 잘못한 곳을 보지 못한다. –

답변

0

이 조건은 다음과 같습니다.

if($DETAILS->getColumnVal("GENUS") != $previousCat) 

그런 다음 동일한 조건을 사용하여 행을 종료합니다. 따라서 행을 만드는 루프의 첫 번째 반복은 이후에 $ previousCat의 값만 변경하기 때문에 항상 첫 번째 col-md-4 div 다음의 행을 종료합니다. 그러나 $ beforeCat 값을 변경하면 예상 한대로 행 div를 닫을 때 문제가 발생할 수 있습니다.

덜 우아한 솔루션의 경우 마지막 조건문에서 확인하고 첫 번째 조건으로 설정 한 부울 변수가 작동합니다. 이렇게하면 새 행이 새롭게 이 생성되었는지 확인하고 동일한 반복으로 끝나지 않아야합니다. 이것은 일반적으로 논리에 약간의 변경이 있음을 나타냅니다.

+0

감사합니다. 어떻게되는지 알려 드리겠습니다. jQuery 솔루션에 대한 자습서를 제안 할 수 있습니까? –

+0

실수로 내 디자인 요구 사항을 예상하고 자신에 대한 가정을 너무 많이하고 있기 때문에 실제로 원래 응답의 jQuery 부분을 편집하려고합니다. Javascript와 jQuery는 이벤트 처리, 폴링 (polling)과 같은 페이지 렌더링과 상관없이 이러한 요소를 조작하는 데 사용하는 것으로 볼 수 있습니다. PHP로 초기 HTML 생성을 처리하는 방법이 올바른 방법이며, 지금까지 보여준 것에 대해 jQuery가 필요하지 않으며, 사실 당신과 저는 로직을 변경하는 솔루션을 제안 할 수있었습니다. – bboll

+0

정말 도와 주셔서 감사합니다. 귀하의 답변은 저의 길을 찾는데 정말로 도움이되었습니다.누가이 질문에 -3을 얻었는지 확실하지 않고, 내가 알고있는 것처럼 명확하게 말하면서 어디에서나 비슷한 것을 찾지 못했습니다. 그러나 중요한 것은 당신과 다른 응답자가 저에게 답을 찾도록 도왔습니다 - 감사합니다 ! –

0

필자가 생각해 낸 해결책은 PHP 코드에서 col-md-12와 col-md-4를 사용하여 if 행을 사용하는 것입니다.

<section class="container-fluid no-gutters"> 
<div class="row" id="list"> 

<?php 

$previousCat = null; // starts the category at NULL 

while(!$DETAILS->atEnd()) { 

    // Check if GENUS if different. If yes then display GENUS and start row to contain all varieties 

    if($DETAILS->getColumnVal("GENUS") != $previousCat) { 

    echo '<div class="col-md-12" style="clear:both"> 

    <div class="w-50 g-my-10 g-bg-pale"><h2>'.$DETAILS->getColumnVal("GENUS").'</h2></div> 
    </div> 
    <div class="col-md-4" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px"> 
<p><img src="17_photos/'.$DETAILS->getColumnVal("IMAGE").'" title="'.$DETAILS->getColumnVal("VARIETY").'" class="img-fluid " style="max-width:80%" /></p> 
<p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong> 
<br />'.$DETAILS->getColumnVal("DESCRIPTION").' 
<br />'.$DETAILS->getColumnVal("TYPE").'</p> 
</div> 
'; 
} 
// if GENUS is not different 
else { 


echo ' 
<div class="col-md-4" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px"> 
<p><img src="17_photos/'.$DETAILS->getColumnVal("IMAGE").'" title="'.$DETAILS->getColumnVal("VARIETY").'" class="img-fluid " style="max-width:80%" /></p> 
<p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong> 
<br />'.$DETAILS->getColumnVal("DESCRIPTION").' 
<br />'.$DETAILS->getColumnVal("TYPE").'</p> 
</div> 
'; 
    } 


    // save the GENUS for comparison with next GENUS 
    $previousCat = $DETAILS->getColumnVal("GENUS"); 

    $DETAILS->moveNext(); 
} 
$DETAILS->moveFirst(); //return RS to first record 


?> 
</div> 
</section> 
관련 문제