Question

我目前正在学习asp.net mvc的东西以及设计我的产品页面时的多次试错，我对如何安排我的产品感到很遗憾。目前它像一个接一个地堆叠垂直

例如

产品1

产品2

产品3

产品4

相反，我想让它像

例如

Product 1  Product 2  Product 3 Product 4

这是我认为应该改变的区域，但我尝试了多种内容，例如内联块，浮动：左边但是没有变化

以下是我的产品部分代码，有关如何按4 by 3排列的任何帮助，因为我目前正在学习只有12种产品。

提前谢谢！

 <div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title" style="font-size:24px"><strong>Products</strong></h2>
        </div>

        <div class="panel-body">
            <div class="col-md-4">

                <table cellpadding="10" data-bind="foreach: contactLens">
                    <tr>
                        <td >
                            <div class="entire-package">
                                <img width="255" height="190" data-bind="attr: { src: 'data:image/jpeg;base64,'+ Image }" />
                                <div class="detail-design">
                                    <strong><span data-bind="text: Name"></span></strong> <br />
                                    Type: <span data-bind="text: Type"></span><br />
                                    Brand: <span data-bind="text: Brand"></span> <br />
                                    Price: <span data-bind="text: Price"></span> <br />
                                    Amount: <span data-bind="text: Amount"></span> <br />
                                    <a href="#" data-bind="click:$parent.getProductDetails" class="btn btn-primary btn-xs" style="font-size:18px">Details</a>
                                </div>
                            </div>
                        </td>

                    </tr>
                </table>

            </div>
        </div>
    </div>
    <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
</div>

Answer 1

这是一个如何看起来的例子。

<html>
<body>
  <table style="width:50%">
    <tr>
      <th>Product</th>
      <th>Brand</th>
      <th>Price</th>
      <th>Amount</th>
    </tr>
    <tr>
      <td>Name</td>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
    </tr>
  </table>
</body>

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse; }
th, td {
    padding: 5px;
   text-align: left; }
</style>

按行排列产品列表

1 个答案: