CSS与mysql数据集对齐

时间:2019-03-15 16:48:59

标签: php html css mysql

我想设计自己的网站。我快完成了,但是现在遇到了问题,我在网上找不到任何东西: 我有一个像论坛一样工作的功能,在主要方面,应该显示最新的〜4篇文章。现在,我将向您展示索引代码:

<?php 
session_start();
require_once("inc/config.inc.php");
require_once("inc/functions.inc.php");
include("templates/header.inc.php")
?>
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>



<?php
$statement = $pdo2->prepare("SELECT * FROM (fragen) ORDER BY fragen_date DESC LIMIT 2");
$result = $statement->execute();
while($row = $statement->fetch()) {
    echo 
    '<a class="kein" href="forum_forum.php?id='.$row['fragen_id'].'">
    <div class="forum_klein_fragen"><div class="forum_Titel_index">' ,"Titel: 
    ".$row['fragen_title'].'</div>',
    "<br><br>",'<div class="forum_Subtitel">', "Subtitel:  " .$row['fragen_subtitle'].'</div>',
    //"<br><br>",'<div class="forum_Content">',"Text:  ".$row['fragen_content'].'</div>',
    //"br><br>",'<div>'.$row['fragen_id'].'</div>',
    //"<br><br>",'<div class="forum_Upload-date">',"Upload-Datum:  ".$row['fragen_date'].'</div>',
    '</div></a>';
}

$statement = $pdo->prepare("SELECT * FROM entries ORDER BY entry_date DESC LIMIT 1");
$result = $statement->execute();
while($row = $statement->fetch()) {
    echo '<div class="forum_klein_beiträge">
    <div class="Titel">' ,"Titel:  ".$row['entry_title'].'</div>',
    "<br><br>",'<div class="Subitel">', "Subtitel:  " .$row['entry_subtitle'].'</div>',
    "<br><br>",'<div class="Content">',"Text:  ".$row['entry_content'].'</div>',
    "<br><br>",'<div class="Bild"><img class="pic" alt="Ein Bild" title="Eine Pflanzen" src="'.$row['entry_picture'].'">',
    "<br><br>","Bildlink:  ".$row['entry_picture'].'</div>',
    "<br><br>",'<div class="Upload-date">',"Upload-Datum:  ".$row['entry_date'].'</div>',
    '</div>';
}               

include("templates/footer.inc.php");
?>

我的风格是(缩短)

.forum{
    color: black;
    text-decoration:none;
    width:75%;
    padding-left:20px;

}
.kein{
    color: black;
    text-decoration:none;
    width:75%;


}
.kein :hover{
    color:black;
    background-color:#d4d4d4;
    border-color:none;
}
.Titel{
    font-size:20px;
    text-align:center;
    padding-left:0px;
    background-color: #d6d6d6;/*#d6d6d6#6c6eff ;*/
    border-radius:2px;
    margin:0px;
    border:0px;
}
.Subtitel{
    font-size:18px;
    text-align:left;
}
.Content{
    text-align: left;
    font-size:15px;
}
.Upload-date{
    font-size:10px;
    text-align: right;
    background-color: #d6d6d6;
    padding-right: 20px;
    margin:0px;
}

.Bild{
    margin:0px;
    padding-right: 20px;
    font-size:14px;


}
img.pic{
    width:30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.forum_klein{
    width: 33%;
    margin-left:10px;
    background-color:#f1f1f1;
    margin-bottom:10px;
}
.forum_Titel{
    color:blue;
}
.genau_titel{
    color:rgb(0, 0, 0);
    background-color:rgb(224, 150, 65);
}
.genau_Subtitel{
    color:pink;
}
.forum_klein_beiträge{
    float:left;
    width: 33%;
    margin-left:10px;
    background-color:#f1f1f1;
    margin-bottom:10px;
    margin-right:0px;
}
.forum_klein_fragen{
    float:right;
    border-radius:3px;
    width: 25%;
    margin-left:10px;
    background-color:#f1f1f1;
    margin-bottom:10px;
    margin-right:0px;
}
.forum_Titel_index{
    color:red;
    background-color: #d6d6d6;
    border-radius:1px;
}

hr {
    clear: both;
}

在这里您可以看到图像的样子-> The wrong

0 个答案:

没有答案