Question

我有一个小E-Commerce website。我有一个漂浮在页面右侧的DIV。

我想显示项目的图像以及图像下方的名称。

现在，如果我从中删除DIV，

<div><?php echo $item['item_name'] ?></div>

它确实在平铺视图中显示（所有项目彼此相邻，但其名称显示在图像之后，不在之下）

<div id="list_products">

    <?php foreach ($items as $item) { ?>

        <div class="item_wrapper">

            <a href="uploads/<?php echo $item['item_id'] . '.' . $item['item_image_ext'] ?>"><img src="uploads/thumbs/<?php echo $item['item_id'] . '.' . $item['item_image_ext']; ?>" alt="" style="height: 200px; width:200px"/></a>
            <div>
             <?php echo $item['item_name'] ?>
            </div>
       </div>

<?php } ?>

</div>

CSS

.item_wrapper{
    width: 300px;
    height:300px;
    display:inline;
}


#list_products{
    width: 75%;
    float: right;
    max-width: 78%;
    margin: 0px;

}

Answer 1

制作div display: block;

我在这里直接定位div。对于您的网站，我会给该孩子div class .item_name个

CSS

.item_wrapper div {
display: block;
}

这假设您的div以某种方式设置为display: inline，例如this demo.

如果你的div被浮动，那么你需要告诉这个div没有浮动。

CSS

.item_wrapper div {
float: none;
}

喜欢this demo

在另一个DIV内显示DIV内联

1 个答案: