Как я могу установить 4 элемента в строке? (PHP / HTML / CSS) не таблица - PullRequest
Новая
       15

Как я могу установить 4 элемента в строке? (PHP / HTML / CSS) не таблица

0 голосов
/ 25 октября 2019

Я хочу напечатать результат, так как каждый столбец имеет фиксированную строку, как каждая строка имеет 4 элемента

Мой код: 

<!DOCTYPE html>

<html>

<head>
    <title>Print your data</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <style>
        * {
            font-family: Arial;
        }
        p.inline {
            display: inline-block;
        }
        span { 
            font-size: 13px;
        }
        .grid-container { 
            position: relative;
            display: inline-block; 
        }
        .a { 
            position: relative;
            display: inline-block;
            margin: 15px;
        }
        .print {
            margin-top: 10px;
            background-color: navy;
            color: white;
        }
        .print:hover {
            color: white;
            background-color: black;
        }
    </style>

    <style type="text/css" media="print">
        @page 
        {
            size: auto;   /* auto is the initial value */
            margin: 1mm;  /* this affects the margin in the printer settings */

        }
        .grid-container { 
            position: relative;
            display: inline-block;
        }
        .a { 
            position: relative;
            display: inline-block;
            margin: 15px;
        }
        .print {
            display: none;
        }
    </style>
</head>

<body>
    <div class="col text-center">
        <button onclick="window.print();" class="print btn btn-lg">Print your data</button>
    </div>
    <div style="margin: 1%">

            <?php
            require 'vendor/autoload.php';

                $row = 1;
                if (($csvfile = fopen($_FILES['file']['tmp_name'], "r")) !== FALSE) {
                    while (($csvdata = fgetcsv($csvfile, 1000, ",")) !== FALSE) {

                        $colcount = count($csvdata);

                        //Skip the CSV first line, start read from second line
                        if($row == 1) {

                            $row++; continue; 
                        }

                        if($colcount!=5) {
                            $error = 'Column count incorrect';
                        } else {

                            $imageData = base64_encode(file_get_contents($csvdata[4]));
                            $generator = new \Picqer\Barcode\BarcodeGeneratorPNG();
                                echo '<div class="grid-container">';
                                echo '<div class="a">
                                      <img src="data:image;base64,'.$imageData.'" width="50"/>
                                      <div><b>Item: '.$csvdata[0].'</b></div>
                                      <div>
                                      <img src="data:image/png;base64,' . base64_encode($generator->getBarcode("$csvdata[1]", $generator::TYPE_CODE_128)) . '"/>
                                      <div><b>'.$csvdata[1].'</b></div>
                                      </div>
                                      <span><b>Price: '.$csvdata[2].'</b></span>
                                      <div>
                                      <span><b>Desc: </b>'.$csvdata[3].'</span>
                                      </div>
                                      </div></div>';
                        }
                    }
                    fclose($csvfile);
                }
            ?>
    </div>
</body>
</html>

Прямо сейчасрезультат печати:

изображение результата:
image of the result

Я хочу результат печати:

Я хочуизображение результата 1:
I want the result image 1

Я хочу изображение результата 2:
I want the result image 2

Я проверил онлайн пример, но в большинстве примеров есть другой тег <tr>, но мой не похож на таблицу, у меня есть только одно значение, которое нужно показать.

Итак, в этом случае как можноЯ делаю так, чтобы в макете печати фиксировалась ширина каждого элемента и можно ли фиксировать количество элементов каждой строки?

Ответы [ 2 ]

0 голосов
/ 28 октября 2019

Вот несколько способов сделать это.

Сначала с помощью css, например, вы можете установить ширину 20% для каждого из них и поместить их в контейнер, используя display: flex следующим образом: 

.container { display: flex; flex-wrap: wrap; }
.each { width: 20%; }
<div class="container">
  <div class="each">1</div>
  <div class="each">2</div>
  <div class="each">3</div>
  <div class="each">4</div>
  <div class="each">5</div>
  <div class="each">1</div>
  <div class="each">2</div>
  <div class="each">3</div>
  <div class="each">4</div>
  <div class="each">5</div>
  <div class="each">1</div>
  <div class="each">2</div>
  <div class="each">3</div>
  <div class="each">4</div>
  <div class="each">5</div>
</div>

Второй способ, используя PHP, вы можете решить эту проблему с помощью оператора% modulo. Узнайте больше об этом здесь: https://www.php.net/manual/en/language.operators.arithmetic.php

например, перед циклом установите индекс, например, $ i = 0;а затем для каждой строки увеличьте его на $ ++;При этом вы можете в своем коде определить, является ли это первым из 5 с if ($i % 5 === 1), а для последней строки в 5 вы можете использовать if ($i % 5 === 0)

В этих операторах if вы можете разбить блокипереместитесь на новую строку или разбейте, как вам нужен любой контейнерный ряд div и т. д.

Однако я думаю, что способ css - это самый простой и лучший способ сделать это из представленных 2. Надеюсь, это поможет.

0 голосов
/ 25 октября 2019

Я думаю, что вы можете быть хорошо обслужены, просто используя таблицу из 4 столбцов. Пример: 

<table>
  <thead>
   <tr>
     <th>Header 1</th>
     <th>Header 2</th>
     <th>Header 3</th>
     <th>Header 4</th>
   </tr>
</thead>
  <tr>
    <td>Cell1 </td>
    <td>Cell2 </td>
    <td>Cell3 </td>
    <td>Cell 4</td>
  </tr>
  <tr>
     <td>Row 2, Cell1</td>
     <td>Row 2, C2</td>
     <td>Row 2, C3</td>
     <td>Row 2, C4</td>
  </tr>
</table>

Каждый TR будет иметь столько TD, сколько необходимо для столбцов в вашей таблице. Каждый TR является строкой.

Для более продвинутого метода вы можете использовать flexbox с контейнерами фиксированной ширины.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...