DIV的高度自动调节

时间:2012-05-19 07:49:41

标签: php css html

我正在使用div的en css代码,从mysql数据库中获取一些值。

工作正常。但是如果数据库中的值超过1行,则带有div的表看起来不太好。

这是我正在使用的代码:

 $result = mysql_query("SELECT * FROM boxen ");
    while ($row = mysql_fetch_assoc($result))
    {
    echo '<div class="a naam">';
    echo '<a href="boxen.php?boxid=' .  $row['ID'] . '">' . $row['naam'] . '</a>';
    echo '</div>';

    echo '<div class="a datum">';
    echo $row['datum'];
    echo '</div>';

    echo '<div class="a land">';
    echo $row['land'];
    echo '</div>';

    echo '<div class="a naam">';
    echo $row['starter'];
    echo '</div>';
    }

css代码调整颜色和宽度。 简短:如何修复高度?

P.S。我已经搜索了stackoverflow,但没有找到任何可以帮助我的东西,也许我使用了错误的关键字?

编辑:

<div class="inhoud">
<h2>Inhoud van de box: </h2><br />
<div class="header naam">
    Naam product
</div>
<div class="header omschrijving">
    Omschrijving
</div>
<div class="header aantal">
    Aantal
</div>
<div class="header datum">
    Datum toegevoegd
</div>
<div class="header naam">
    Naam toeveoger
</div>
<div class="header datum">
    Datum verwijderd
    </div>
<div class="header naamVerwijderaar">
    Naam verwijdereraar
</div>
<div class="header icon">
    &nbsp;
</div>
<div class="header icon">
    &nbsp;
</div>
<div class="header icon">
    SAMPLE SAMPLE SAMPLE SAMPLE SAMPLE
</div>

这是标题,但它有同样的问题。最后一列将有2行,如果我添加另一行,它会变得非常混乱。

和css代码:

/* Algemeen voor header*/
.header {
    background-color:#4DA0FF;   
    float:left;
    margin-left:4px;
    margin-bottom:4px;
    color:white;

}
/* END HEADER*/
/* ALGEMEEN OVERIZCHT*/
/* naam */
.naam{
width:200px;
height:auto;
}
/* naam die het product er uit heeft gehaald*/
.naamVerwijderaar{
width:210px;
height:auto;

}
/* datum  */
.datum{
width:150px;
height:auto;

}


/* omschrijinvg */
.omschrijving{
    width:200px;
    height:auto;

}
.aantal {
    width:80px;
    height:auto;

}
/* land */
.land{
width:150px;
height:auto;

}
inhoud{
    width:1305px;
}

我不需要这个例子的所有css代码!

1 个答案:

答案 0 :(得分:1)

你想要一张桌子来做这类事情。

表格并非都是邪恶的,当用于正确的数据类型(表格数据,即表格中最适合的数据类型)时,表格是完全可以接受的。

示例代码:

<style type="text/css">
    th {
        background-color: rgb(77, 160, 255);
        margin-left:      4px;
        margin-bottom:    4px;
        color:            rgb(255, 255, 255);
    }
    table caption {
        font-size:   2em;
        font-weight: bold;
    }
</style>
<table>
    <caption>Inoud van de box:</caption>
    <thead>
        <tr>
            <th>Naam product</th>
            <th>Omschrijving</th>
            <th>Antal</th>
            <th>Datum toegevoegd</th>
            <th>Naam toevegoer</th>
            <th>Datum verwijderd</th>
            <th>Naam verwijderd</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>SAMPLE SAMPLE SAMPLE SAMPLE</th>
        </tr>
    </thead>
</table>