PHP - 如何創建4列（4 x 25％），然後結束新行4

我有一個項目正在進行，我們可以創建一個產品，該產品已加載到首頁PHP。
但是，如果有5個產品，則不會創建新行。如果有5種產品應該發生什麼，應該顯示每個4行的2行。PHP - 如何創建4列（4 x 25％），然後結束新行4

<section class="ICO"> 
    <div class="one-fourth-gridtable"> 
     <table class="grid table"> 
      <?php 
      while ($subject = mysqli_fetch_assoc($subject_set)) { 
       $imagenavn = $subject['navn']; 
       $sql = "SELECT * FROM product_images WHERE image_name = '$imagenavn'"; 
       $sth = $db->query($sql); 
       $result = mysqli_fetch_array($sth); 
       ?> 
       <td> 
        <div style="border: 1px solid black; border-radius:2000px;"> 
         <img src="data:image/jpeg;base64,<?= base64_encode($result['image']); ?>" /> 
        </div> 
        <a class="action" href="<?= url_for('../show.php?id=' . h(u($subject['id']))); ?>"><?php echo h($subject['navn']); ?></a> 
       </td>  
      <?php } ?> 
     </table> 
    </div> 
</section>

我試圖將樣式表CSS：

table { 
    background-color: #6991ac; 
    width: 100%; 
    text-align: center; 
    display: inline-table; 
    margin-top: -5%; 
} 
.ICO { 
    max-width: 1100px; 
    margin: 0 auto; 
} 
.one-fourth-gridtable { 
    width: 100%; 
}

來源

2017-10-12 Mango

你想實現很可能使用通用'div's可以做得更好的結構，一個表將適合在儘可能多的細胞，或列在一排之能只要你不斷向'tr'元素添加'td'元素。 – UncaughtTypeError

「_如何創建4列（4 x 25％），然後用4 _ _的新列結束行......這是否意味着您需要4列表格單元格，並從第5行開始，移至後續行？你能否更新你的問題以包含示例輸出（例如，HTML，圖形）？ –

有了這段代碼，你可以在4張圖像之後和8張圖像之後得到一個新行，由於$ u，循環停止。如果不需要，您可以刪除/更改$ u。

<?php require_once('private/initialize.php'); ?> 
 
<?php $test = "Alle Produkter"; ?> 
 
<?php $subject_set = find_all_subjects(); ?> 
 
<?php $page_title = 'Forside'; ?> 
 
<?php include(SHARED_PATH . '/staff_header.php'); ?> 
 

 
<!--- Start of header --><head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link href="design/Design.css" rel="stylesheet" type="text/css" /> 
 
<meta charset="utf-8" /> 
 
</head> 
 

 
<!--- End of header --> 
 

 
<!--- Start of section (BANNER) --> 
 

 

 

 
<section class="banner"> 
 
\t <div class="banner-inner"> 
 
    \t <div id="banner-image"><img src="img/cryptocurrency.png" style="margin-top:10% !important"></div> 
 
    </div> 
 
</section> 
 

 
<!--- End of section (BANNER) --> 
 

 
<!--- Start of section (ICO'S) --> 
 

 

 

 
<!--- End of section (ICO'S) --> 
 

 

 
    \t \t <div class="sactions"> 
 
    \t \t <!-- <a class="saction" href="<?php echo url_for('/staff/subjects/new.php'); ?>">Create New Subject</a> -->   </div> 
 

 

 
<section class="ICO"> 
 
\t \t <div class="one-fourth-gridtable"> 
 
    \t \t \t \t <table class="gridtable"> 
 

 
\t \t \t \t <?php 
 
$i = 0; 
 
$u = 0; 
 
\t \t \t \t while($subject = mysqli_fetch_assoc($subject_set)) { 
 
\t \t \t \t \t $imagenavn = $subject['navn']; 
 
      \t \t \t $sql = "SELECT * FROM product_images WHERE image_name = '$imagenavn'"; 
 
      \t \t \t $sth = $db->query($sql); 
 
      \t \t \t $result=mysqli_fetch_array($sth); 
 

 
$i++; 
 
$u ++; 
 
\t \t \t \t ?> 
 

 

 

 
\t \t \t \t <td> 
 

 

 

 

 
      <?php 
 

 

 
\t \t \t \t \t \t echo '<img src="data:image/jpeg;base64,'.base64_encode($result['image']). '"/> '; \t \t ?> 
 
\t \t \t \t \t \t <a class="action" href="<?php echo url_for('../show.php?id=' . h(u($subject['id']))); ?>"><?php echo h($subject['navn']);?></a> 
 
<?php 
 
if \t ($u > 7) { 
 
\t break; 
 

 
} 
 
if \t ($i > 3) { 
 
\t echo '</tr><tr>'; 
 
\t $i = 0; 
 
} 
 

 
?> 
 

 

 

 
      \t </td> 
 

 

 

 

 
     \t \t <?php } ?> 
 

 

 
    \t \t \t </table> 
 

 
      </div> 
 
      </section> 
 

 
\t \t \t \t \t \t <?php 
 
\t \t \t  mysqli_free_result($subject_set); 
 
\t \t \t  \t ?>

來源

2017-10-13 11:02:08 Frederic

表自動擴展爲包含所有的元素在同一行上。

要解決這個問題，你可以簡單地利用新的錶行（<tr>），但我會建議換到<div>佈局和float荷蘭國際集團的元素到left：

<div class="contents"> 
// output the contents 
</div> 

.contents img { 
    float: left; 
}

這會導致元素在佔用超過可用寬度時自動移動到下一行，無需擔心每行應顯示多少個元素：

.contents img { 
 
    float: left; 
 
    margin: 5px; 
 
}

<div class="contents"> 
 
    <img src="http://placehold.it/200" /> 
 
    <img src="http://placehold.it/200" /> 
 
    <img src="http://placehold.it/200" /> 
 
    <img src="http://placehold.it/200" /> 
 
</div>

希望這有助於！ :)

來源

2017-10-12 21:07:17

首先計算要顯示的結果，例如$ count。

<table class="grid table"> 
<tr> 
<?php 
$trer = 1; 
$cycler = 0; 
while($subject = mysqli_fetch_assoc($subject_set)) 
{ 
    $cycler++; 
       $imagenavn = $subject['navn']; 
       $sql = "SELECT * FROM product_images WHERE image_name = '$imagenavn'"; 
       $sth = $db->query($sql); 
       $result=mysqli_fetch_array($sth); 
?> 

      <td>YOUR CONTENT</td> 
<?php 
if($trer == 4 && $cycler < $count) //if true you're at the last td of the line, but not on the last line, so let's put a new line 
    { 
    echo "</tr><tr>"; 
    $trer = 0; 
    } 
$trer++; 
} 
if($trer > 0 && $trer < 4) //if line is incomplete (less than 4 items but 1 or more 
{ 
    for(int t = 0; $t < 4 - $trer; $t++) //echo empty TDs till filling the line 
    echo "<td>&nbsp;</td>"; 
} 
?> 
</tr> 
</table>

來源

2017-10-12 21:52:09

PHP - 如何創建4列（4 x 25％），然後結束新行4

回答

相關問題