PHP在CSS中回聲

我有一個PHP腳本，它在div中有回聲，裏面有另一個div。我很難過，我想知道如何讓第二個div與第一個div分開，這樣一個將在另一邊，另一邊。PHP在CSS中回聲

這裏的PHP

echo '<div class="viewpost">'; 
    while ($row = mysqli_fetch_array($data)) { 
    if(!empty($row['first_name'])) { 
     echo '<div class="vpside">'; 
     echo '<p>Name:' . $row['first_name'] . '</p>'; 
    } 
    if(!empty($row['gender'])){ 
    echo '<p>Gender: ' . $row['gender'] . '</p>'; 
    echo '</div>'; 
    } 
    if(!empty($row['post'])) { 
     echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>'; 
    } 
    } 
    echo '</div>';

這裏的CSS

.vpside { 
    height:100%; 
    width:12%; 
    display:block; 
    border-right:5px solid white; 
    border-bottom:5px solid white; 
    border-top:5px solid white; 
} 

.vpside1 { 
    width:10%; 
    border-right:5px solid white; 
    border-bottom:5px solid white; 
    border-top:5px solid white; 
} 

.viewpost { 
    margin-bottom:25px; 
    background-color: #000; 
    border: 5px solid white; 
    border-radius:10px; 
} 

p.viewpost { 
    background-color: #000; 
} 

.viewpost1 { 
    border-bottom: 5px solid white; 
    }

來源

2014-01-26 user2544765

這裏最終可能會有無效的HTML。例如，如果$ row ['first_name']爲空，但$ row ['gender']不是，則會有額外的結束標記。 – jd182

@ jd182他們將是空的 – user2544765

@ user2544765這就是@ jd182試圖說的。如果'$ row ['first_name']'或'$ row ['gender']'將被清空，那麼您將有無效的HTML代碼從PHP返回'echo'd'。 –

可以剛剛結束的第一個div您定義的其他分區將它們分開了。例如：

<?php 
    echo '<div class="viewpost">'; 
    echo '</div>'; //Bottom line moved here 
    while ($row = mysqli_fetch_array($data)) { 
    if(!empty($row['first_name'])) { 
     echo '<div class="vpside">'; 
     echo '<p>Name:' . $row['first_name'] . '</p>'; 
    } 
    if(!empty($row['gender'])){ 
    echo '<p>Gender: ' . $row['gender'] . '</p>'; 
    echo '</div>'; 
    } 
    if(!empty($row['post'])) { 
     echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>'; 
    } 
    } 
?>

或者，如果你想保持<p>的一個DIV中：

<?php 
    while ($row = mysqli_fetch_array($data)) { 
    if(!empty($row['first_name'])) { 
     echo '<div class="vpside">'; 
     echo '<p>Name:' . $row['first_name'] . '</p>'; 
    } 
    if(!empty($row['gender'])){ 
    echo '<p>Gender: ' . $row['gender'] . '</p>'; 
    echo '</div>'; 
    } 
    echo '<div class="viewpost">'; 
    if(!empty($row['post'])) { 
     echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>'; 
    } 
    echo '</div>'; 
    } 
?>

然後，如果你希望他們並排，加display: inline-block每個格：

.vpside { 
    height:100%; 
    width:12%; 
    display: inline-block; /*changed from display: block*/ 
    border-right:5px solid white; 
    border-bottom:5px solid white; 
    border-top:5px solid white; 
} 

.vpside1 { 
    width:10%; 
    border-right:5px solid white; 
    border-bottom:5px solid white; 
    border-top:5px solid white; 
} 

.viewpost { 
    margin-bottom:25px; 
    background-color: #000; 
    border: 5px solid white; 
    border-radius:10px; 
    display: inline-block; /*added*/ 
} 

p.viewpost { 
    background-color: #000; 
} 

.viewpost1 { 
    border-bottom: 5px solid white; 
}

來源

2014-01-26 16:00:26 Anonymous

PHP在CSS中回聲

回答

相關問題