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”

同样如此

Answer 2

这是一个jfiddle修复：

link

还必须在float: left;和image ID上添加under

#image {
    float: left;
}

#under {
    float: left;
}

如果您需要，请告诉我

漂浮不起作用

2 个答案: