일부 제목이 다른 제목보다 길고 래핑해야하는 경우 모든 제목 요소를 동일한 높이로 만듭니다.

아래에 세 가지 가능한 해결책이 포함되어 있습니다. 질문에서 요청한대로 수동 줄 바꿈을 추가합니다. 기본적이지만 만족스럽지 않은 CSS 옵션과 jQuery 솔루션은이 경우 가장 유연하다고 제안 할 것입니다.

CSS 전용 솔루션이 일반적으로 레이아웃 문제를 해결하는 데 선호되는 방법이지만 요소의 높이가 같은 경우이를 수행하는 명확한 방법이 없으며 종종 아래와 같은 jQuery 솔루션이 필요합니다.

1. 수동 줄 바꿈 -질문에서 요청한대로

앞서 언급 한 추가 SQL 쿼리를 수행하는 대신 PHP에서 두 가지 다른 방법으로 쉽게 수행 할 수 있습니다.

(a) 행 을 표시 하기 전에 행 을 반복하여 제목 길이를 계산 한 다음 줄 바꿈을 사용
하거나 사용 하지 않고 표시하도록 다시 반복 하거나
(b) 실제로 두 번 반복하고 싶지 않은 경우 다음과 관계없이 줄 바꿈을 포함 할 수 있습니다. 길이를 한 번 반복 할 때마다 해당 루프의 선 길이도 계산합니다. 그런 다음 필요하지 않은 경우 CSS를 사용하여 줄 바꿈을 숨 깁니다.

(a) 2 개의 루프 : 길이를 계산하여 줄 바꿈을 추가할지 여부를 결정합니다.

<?php
$maxchars = 41;
$cards = array();
$bLongTitle = false;

while ($row = mysql_fetch_assoc($rs_result)) {
    // save detaisl to $cards array
    $cards[$row["title"]] = $row["category"];
    // check title lengths until we find one over 41 - no need to check any more after that
    if (!$bLongTitle && strlen($row["title"])) > $maxchars)
        $bLongTitle = true;
}
?>
<div class="row">
<?php
foreach ($cards as $title => $category) {
    ?>
    <div class="col xl4 l4 m12 s12">
        <div class="card z-depth-5">
            <div class="card-content">
              <p><? 
                 // if there were any long title, wrap them all text
                 if ($bLongTitle) 
                     $title = wordwrap($title, $maxchars, "<br />\n");
                 echo $title;
              ?></p>
              <p>Category: <? echo $category; ?></p>
            </div>
        </div>
    </div>
    <?php
}
?>
</div>

(b) 1 루프 : 항상 줄 바꿈을 표시하고 필요하지 않으면 숨 깁니다.

<div class="row">
<?php
$bLongTitle = false;
while ($row = mysql_fetch_assoc($rs_result)) {

    ?>
    <div class="col xl4 l4 m12 s12">
    <div class="card z-depth-5">
        <div class="card-content">
          <p class="cardTitle"><? echo wordwrap($title, $maxchars, "<br />\n"); ?></p>
          <p>Category: <? echo $row["category"]; ?></p>
          <?php 
             // check title lengths until we find one over 41 - no need to check any more after that
            if (!$bLongTitle && strlen($row["title"])) > $maxchars)
               $bLongTitle = true;
          ?>
       </div>

    </div>
    </div>
    <?php
};
?>
</div>
<?php if ($bLongTitle) {?>
    <script>.cardTitle br {display:none;}</script>
<?php } ?>

2. CSS 전용 솔루션 -OP에 적합하지 않습니까?

제목이 직계 형제가 아니기 때문에 유일한 방법은 모든 제목의 높이를 고정하는 것입니다. 제목의 길이가 매우 다양 할 수 있으므로 모든 가능성에 맞게 "기본"높이를 선택할 수 없으며 열의 반응 형 너비로 인해 높이가 잠재적으로 변경되기 때문에 복잡하기 때문에 이것은 바람직한 솔루션이 아닙니다. 동적으로.

그러나 완전성을 위해 :

• 루프의 제목에 클래스 (예 : .cardTitle) 추가
• 줄 바꿈이 있거나없는 제목의 적절한 높이를 식별하고 CSS에서 설정합니다.
• 해당 클래스 (예를 추가 wrapTitle하여에) <p>어떤 제목이 루프에서 너무 오래 (위의 줄 바꿈을 추가 유사) 인 경우

CSS

p.cardTitle { height:20px; } /* example of the default height for title */
p.cardTitle.wraptitle { height:40px; } /* example of height for wrapped title */

PHP (위의 (a) 옵션으로 $ cards 배열을 채우기 위해 SQL 행을 반복 한 후)

<?php
foreach ($cards as $title => $category) {
    ?>
    <div class="col xl4 l4 m12 s12">
        <div class="card z-depth-5">
            <div class="card-content">
                <p class="cardTitle <?php if ($bLongTitle) echo "wrapTitle"; ?>"><? echo $title; ?></p>
                <p>Category: <? echo $row["category"]; ?></p>
            </div>
        </div>
    </div>
    <?php
};
?>

3. jQuery

jQuery를 사용하여 모든 요소를 ​​반복하여 높이를 계산하고 모두 가장 높게 설정할 수 있습니다.

코드를 직접 작성할 수 있습니다 ( jQuery를 사용하여 자동으로 동일한 높이의 모든 div 열을 만드는 방법 또는 jQuery를 사용하여 div에 대해 동일한 높이 설정 참조). 하지만이를 수행 할 수있는 라이브러리가 있습니다. matchHeight

라이브러리를 사용하여 페이지에 포함하고 다음과 같이 호출하기 만하면됩니다 ( 제목이 있는에 클래스 cardTitle를 추가했다고 가정 <p>).

jQuery(document).ready(function() {
    $(".cardTitle").matchHeight();
});