html - 在另一个 DIV 内显示 DIV 的内联

Question

我有一个小型电子商务网站。我有一个 float 到页面右侧的 DIV。

我想显示元素的图像和图像下方的名称。

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

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

它确实以平铺 View 显示(所有元素彼此相邻，但其名称显示在图像之后，不在下方)

<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。对于您的网站，我会给那个 child div .item_name 的 class :)

CSS

.item_wrapper div {
display: block;
}

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

如果你的 div 是 float 的，那么你需要告诉这个 div 没有 float 。

CSS

.item_wrapper div {
float: none;
}

喜欢 this demo