漂浮不起作用

Question

我目前正在开展一个"网上商店"的项目.我正在创建一个带有float:left;属性的产品面板, 但是当我循环产品时,它们并不是彼此相邻而是在前一个产品之下.我错过了什么？

码:

$web_string = "
<div class='product'>
<div class='image'>
    <img class='image' src='iphone.jpg' alt='iPhone' height='100%' width='100%' />
</div>
<div class='under'>
    <div class='info'>
    <ul>
        <li>iPhone</li>
        <li>iOS</li>
        <li>16 GB</li>
        <li>Black & White</li>
    </ul>
    <a href='#'>more info...</a>
    </div>
    <div class='extra'>
    <p>price: 588</p>
    <button>put in cart!</button>
    </div>
<div>
</div>";

CSS:

#wrapper{
    width: 100%;
    height:100%;
    background-color: blue;

}

.product
{

    float:left;
    width:250px;
    height:250px;
    background-color:red;

}

.onder
{
    height:50%;
}

.afbeelding
{
    background-color: green;
}

.info
{
    background-color:yellow;
    float:left;
    width:50%;
    height:100%;
}

.extra
{
    background-color: purple;
    float:right;
    width:50%;
    height:100%;
}

PHP循环:

<?
echo $web_string;

    for($i = 0; $i < 4; $i++)
    {
        echo $web_string;
        if($i == 2)
        {
            echo "Hello World";
        }
    }
?>

编辑:将ID更改为类

Answer 1

您正在使用CSS ID选择器,它可用于仅指向一个元素.因此float属性仅应用于第一个.使用类代替:<div class='product'>然后在CSS中:.product { float: left; } "image"和"under"相同