Question

我现在正忙着做我正在做的项目。我做了一个输出单个div的php，这个div会输出多次，具体取决于我在数据库中的项目数量，我的问题是，我希望下一个div输出在前一个div的左侧，就像这样：

 -----   -----   -----
|div 1| |div 2| |div 3|
 -----   -----   -----
 -----   -----   -----
|div 4| |div 5| |div 6|
 -----   -----   -----

但我想不出有任何方法可以做到，它的输出应该是这样的：

 -----
|div 1|
 -----
 -----
|div 2|
 -----
 -----
|div 3|
 -----
and so on...

希望你们能帮助我，谢谢。

PHP：

$results = $mysqli->query("SELECT * FROM content");
    if ($results) { 

    //fetch results set as object and output HTML
    while($obj = $results->fetch_object())
        {
        echo '<div class="content">'; 
        echo '</div>';
        }
    }

CSS：

.content{
    margin-bottom: 10px;
    height: 300px;
    background: #F0F0F0;
    padding: 10px;
    border: 1px solid #DDD;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #F8F8F8;

}

Answer 1

take a look at this jsfiddle I have done for you

我使用CSS floats来获得你想要的东西

#container{
    width: 330px;
    height: auto;
}

.box{
    width: 100px;
    height: 100px;
    margin-right:10px;
    margin-top: 10px;
    background-color: red;
    float: left;
}

HTML：

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Answer 2

需要class="content"

的换行符

$results = $mysqli->query("SELECT * FROM content");
    if ($results) { 

    //fetch results set as object and output HTML
    while($obj = $results->fetch_object())
        {
        echo '<div class="box"><div class="content">'; 
        echo '</div></div>';
        }
    }

和css

.box{
     width: 33.333333333%;
     box-sizing: border-box;
     float: left;
     }

这里是demo http://jsfiddle.net/taunj8m0/2/

CSS / PHP：如何使下一个div出现在侧面

2 个答案: