以HTML显示内容

我目前正在做一个RoR项目，我需要并排显示某些东西。但是我做不到。你们能帮我一下吗

这是我从数据库中读取数据的代码

<h1>Results for your search.</h1>

<%=r ender "shirts/new"%>
    </br>
    </br>
    <div class="container">
        <% for prod in @results %>
            <div class="image">
                <%=i mage_tag(prod.image, :alt=>"logo", :size => "75x75") %>
            </div>
            <div class="name">
                <h3> <%= prod.name %> </h3>
            </div>
            <div class="price">
                <h5>New Price:</h5>
                <%=( prod.maxprice)-(prod.maxprice * prod.discount / 100)%>
            </div>
            <div class="price">
                 <h5>Old Price:</h5>
                <%=p rod.maxprice%>
            </div>
            <% end %>
    </div>

---

我想以并排的方式显示从数据库中读取的产品，就像在购物网站中一样。我要连续三种产品。我该怎么做呢？

您需要将每种产品都包装在一个容器中。例如

<div id="productgrid">
    <div class="product" style="float: left; width: 200px;">
        Image and description goes here.
    </div>
</div>

图片和描述在这里。

问题是您已经设置了

容器

=>

宽度：200px

中的每个元素也是

200px

+，因此它们将始终在新的align中对齐，因为所有子div都占据容器的全宽

此外，您浮动了容器而不是子对象，因此每次创建一个div时，它都将占据最左边的位置

解决方案

• 增加

  容器的宽度

  div，并

• 添加<代码>浮动：左发送给所有孩子

编辑

您需要从child

div

s中删除固定宽度，并将所有产品包装在一个类中，然后将其浮动

.product {
    float:left
}

---

我无法并排显示我的内容。谢谢回复。但这不是我想要的。名称应出现在图片下方，价格应出现在图片下方。形象、名称、价格共同构成一个产品。我希望这些产品能够并排展示，而不是单独的价值。明白了…更新小提琴…给我一分钟！！：）@user2691793:添加了编辑，如果您不必支持旧浏览器，那么我建议您查看

display:table

mehod，它更干净！！

.product {
    float:left
}