Question

我有一个带有while循环的php站点，它读取数据库。例如，它读出：名称，类别等。在读出所有参数后，它将值放在一个框中（如在窗口或类似的东西中）。这个盒子是Div。现在我的问题是，有些盒子比其他盒子大。我希望每个盒子都和同一行中最大的盒子一样大。

此代码在while循环中

这是我们的PHP代码：

    $out .= "<feld class='$categoryTextwithoutempty'><searchTitel class=\"$str1\"><div id ='divs' class=\"divs\" ></searchTitel></feld>";

        $out .= "<div id ='formValue' class='$categoryTextwithoutempty'  onclick=BoxClick('$MASPID'); >";

    $out .= "<div id ='type$MASPID' class=\"$form_name\" >";


    $out .= "<h4><ul> $form_name </ul></h4><hr>";


    $out .= "<div id ='Inhalt' class=\"descriptionDiv\" >";
    $out .= "<ul> <b>Beschreibung: </b>$form_description</ul>";
    $out .= "<ul> <b>ID: </b>$MASPID</ul>";
    $out .= "<ul> <b>Kategorie: </b>$categoryTextwithoutempty</ul>";
    $out.= "<ul> <b>Link: </b>$link</ul>";

    $out .= "</br>";

    $out .= "</div>";
    $out .= "</div>";
    $out .= "</div>";
    $out .= "</div>";
    $out .= "</div>";

这里是CSS文件：

.divs {
background-color: #E6E5D8;
border-style:groove;
border-radius:15px;
width:250px;
float:left;
margin-left:13px;
margin-top: 13px;
height: 600px;
overflow: hidden;
text-align: left;

感谢您的帮助

Answer 1

查看http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

这是一篇旧文章，但对我有用。

编辑：

<style>
li {
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: inline;
    _height: 250px;
}
</style>

<ul>
<li>
    <div>
        <h4>This is awesome</h4>
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
        alt="lobster" width="75" height="75"/>
    </div>
</li>
</ul>

Answer 2

你有两个选择：

使用javascript定义最大的框。
或者是带有flex-box的纯css解决方案：

.list {
   display: flex;
   flex-wrap: wrap;
}
.list .child {
   display: flex;
}

请参阅this article作为参考：

自动箱高

2 个答案: