如何以有序,美观的方式制作php echo显示?

时间:2017-05-09 11:32:39

标签: php html css

我需要一些帮助。

我正在制作一个页面来显示一些事件。

我有以下代码:

Skole.php:

<!doctype HTML>
<head>

<style>
    #container {
        height: 100%;
    }

</style>
<?php

// LOKAL VERSJON

include 'php/local-query.php';

// LIVE VERSJON
/*
include 'php/live-query.php';
*/
?>
<body ontouchstart>
<?php 
include_once 'php/header.php';

$skoleListe = Skole::all();
$eventListe = Event::all();
$skoleAttributter = '';
$eventAttributter = '';
$skoleIsSet = '';

$distinctEvent = Event::distinct()->get(['type']);

if(isset($_GET['skoleId'])) {
    $skoleIsSet = $_GET['skoleId'];
}


foreach($skoleListe as $skole) {
    $skoleAttributter.= '<option value="skole.php?skoleId=' . $skole['id'] . 
'">' . $skole['navn'] . '</option>';
}

foreach($distinctEvent as $event) {
    $eventAttributter.= '<option value="skole.php?skoleId=' . $skoleIsSet . 
"&event=" . $event['type'] . '">' . $event['type'] . '</option>';
}
?>

<select onchange="this.options[this.selectedIndex].value && (window.location= this.options[this.selectedIndex].value);">
<option value="">Velg arrangementstype</option>
<?= $eventAttributter; ?>

    
    

我不知道为什么这个空间出现了,但以下也是Skole.php的一部分

<div id="container">

<?php include 'php/EventCard.php'; ?>


</div>

<?php

include_once 'php/footer.php';?>

</body>

然后我有了我的eventcard.php:

<!doctype HTML>

<head>

    <style>
        #events{
            display: inline-block;
            line-height: 1px;
            opacity: 0;
            padding: 100px;
            animation-name: eventsAnim;
            animation-duration: 4s;
            animation-fill-mode: forwards;
        }

        @keyframes eventsAnim{
            from {opacity: 0;}
            to {opacity: 1;}
        }

    </style>


</head>

<body>

<?php

error_reporting( error_reporting() & ~E_NOTICE );

$events = Event::with('skoler')->get();
$skoleIsSet = $_GET['skoleId'];
$eventIsSet = $_GET['event'];


if($skoleIsSet && !$eventIsSet) {
    foreach($events as $event) {
        if($event['skole_id'] == $skoleIsSet) {

            echo '<div id="events"><h1>' . $event['title'] . '</h1>';
             echo '<p>Beskrivelse: ' . $event['description'] . '</p>';
            echo '<p>Pris: ' . $event['pris'] . '</p>';
            echo '<p>Dato: ' . $event['date'] . '</p></div>';

        }
    }
} else {
    foreach($events as $event) {
        if($event['type'] == $eventIsSet && $event['skole_id'] == $skoleIsSet) {
            echo '<div id="events"><h1>' . $event['title'] . '</h1>';
            echo '<p>Beskrivelse: ' . $event['description'] . '</p>';
            echo '<p>Pris: ' . $event['pris'] . '</p>';
            echo '<p>Dato: ' . $event['date'] . '</p></div>';
        }
    }
}
?>

</body>

这是skole.php中结果的图片:

enter image description here

正如您所看到的,它们“无序”。

如何使条目以更有序的方式显示,“在线”? 因此,无论条目包含多少个字母,它们仍会出现在相同的位置,彼此之间的空格相同?

我希望这很清楚。

谢谢!

2 个答案:

答案 0 :(得分:0)

您可以使用此方法排序:

$skoleListe = Skole::all().sort();

答案 1 :(得分:0)

使用带浮动的div容器:left

&#13;
&#13;
div{
    width: 25%;
    border: 0;
    float: left;
    padding-top: 16px;
}
&#13;
<div>
    text <br>
    sample text
</div><div>
    text <br>
    sample text
</div><div>
    text <br>
    sample text
</div><div>
    text <br>
    sample text
</div><div>
    text <br>
    sample text
</div><div>
    text <br>
    sample text
</div><div>
    text <br>
    sample text
</div>
&#13;
&#13;
&#13;

使用宽度为25%的div元素使它们连续出现